मार्जिन के बिना टेक्स्ट बॉक्स के दाईं ओर एक बटन को संरेखित कैसे करें?

Question

मैं एक बटन (प्रस्तुत) वास्तव में एक पाठ या खोज बॉक्स के दाईं, खोज बॉक्स के रूप में ही ऊंचाई के साथ
,
और खोज बॉक्स और बटन के बीच किसी भी क्षैतिज सफेद-अंतरिक्ष के बिना कैसे संरेखित कर सकते हैं?

यह मैं

<input type="text" value="" placeholder="search text here" style="display: block; width: 100px; height: 32px; margin: 0px; padding: 0px; float: left;" /> 
<input type="submit" value=" OK " style="display: block; margin: 0px; width: 20px; height: 32px; padding: 0px; float: left; border-left: none;" /> 

http://jsfiddle.net/Ggg2b/

लेकिन न तो पाठ बॉक्स
, और अधिक महत्वपूर्ण बात, मैं प्राप्त करने के लिए सक्षम होने के लिए नहीं है के रूप में ही ऊंचाई बटन है क्या है टेक्स्ट-बॉक्स और बटन के बीच 0.5 से 1 मिमी स्पेस से छुटकारा पाएं।

Answer 1

आह, मुझे मिल गया।

एक बार में दो समस्याएं हैं।
सबसे पहले, इनपुट 1 के अंत और इनपुट 2 के बीच कोई सफेद-स्थान नहीं हो सकता है।
एक ज्ञात आईई बग।

और फिर, बटन पाठ बॉक्स के रूप में एक ही आकार के लिए किया जा रहा है, यह आवश्यक बॉक्स आकार संपत्ति

-moz-box-sizing: content-box; 
-webkit-box-sizing: content-box; 
box-sizing: content-box; 

इस तरह

लागू करने के लिए है:

label, input { 
    margin: 0.1em 0.2em; 
    padding: 0.3em 0.4em; 
    border: 1px solid #f90; 
    background-color: #fff; 
    display: block; 
    height: 50px; 
    float: left; 

    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
    box-sizing: content-box; 

} 

input[type=text] { 
    margin-right: 0; 
    border-radius: 0.6em 0 0 0.6em; 
} 
input[type=text]:focus { 
    outline: none; 
    background-color: #ffa; 
    background-color: rgba(255,255,210,0.5); 
} 
input[type=submit] { 
    margin-left: 0; 
    border-radius: 0 0.6em 0.6em 0; 
    background-color: #aef; 
} 
input[type=submit]:active, 
input[type=submit]:focus { 
    background-color: #acf; 
    outline: none; 
} 



<form action="#" method="post"> 

    <input type="text" name="something" id="something" /><input type="submit" value="It's a button!" /> 

</form> 

Answer 2

एक paragrapgh टैग और वहाँ नाव की कोई जरूरत में रखते:

<p><input type="text" value="" placeholder="search text here" style="display: block; width: 100px;  height: 32px; margin: 0px; padding: 0px;" /> 
<input type="submit" value=" OK " style="display: block; margin: 0px; width: 20px; height: 32px; padding: 0px; " /></p> 

Answer 3

छोड़ दिया चौड़ाई बढ़ाएं, उदाहरण के

<input type="submit" value=" OK " style="display: block; margin: 0px; width: 100px; height: 32px; padding: 0px; float: left;" />

Answer 4

के लिए कहते हैं कि सीएसएस बटन का उपयोग करने के लिए एक ऊंचाई जोड़े ।

.btn { 
    font-size: 16px; 
    border: 0;   
    height: 34px; 
    margin: 0;   
    float:left; 
    } 

फिर style विशेषता का उपयोग करने के लिए textbox ऊंचाई जोड़ सकते हैं और है कि क्या ऊंचाइयों मैच की जाँच करें।

<input type="text" value="" placeholder="search text here" style="height:28px;float:left;margin:0;" /> 
<input type="submit" value=" OK " class='btn' /> 

बेला डेमो: http://jsfiddle.net/suhailvs0/Ggg2b/7/

Answer 5

उन्हें एक कंटेनर में रखो, सेट ठीक width और कंटेनर के height। और तत्वों को कंटेनर में केवल percentage चौड़ाई में सेट करें। यदि आप border-box: sizing; का उपयोग करेंगे तो आप उन्हें border और pagging जोड़ सकते हैं बिना कंटेनर के width और height।

HTML:

<div class="input-box"> 
    <input class="input-1" type="text" value="" placeholder="search text here" /> 
    <input class="input-2" type="submit" value="OK" /> 
</div> 

सीएसएस:

.input-1, .input-2{ 
    display: inline-block; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    float: left; 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
} 
.input-1{ 
    width: 70%; /* input-1 + input-2 = 100% */ 
} 
.input-2{ 
    width: 30%; /* input-1 + input-2 = 100% */ 
} 
.input-box{ 
    height: 32px; /* Own value - full height */ 
    width: 200px; /* Own value - full width */ 
} 

लाइव डेमो। अब नया, संपादित।

http://jsfiddle.net/Ggg2b/14/

Answer 6

 <input type="text" value="" placeholder="search text here" class="txtbox" /> 
    <input type="submit" value=" OK " class="btncls" /> 

     .txtbox{ 
      display: block; 
      float: left; 
      height: 32px; 
      width: 100px; 
     } 

     .btncls{ 
      display: block; 
      float: left; 
      height: 40px; 
      margin: -1px -2px -2px; 
      width: 41px; 
     } 

या फिडल http://jsfiddle.net/Ggg2b/9/

Answer 7

पर जांच करें कि आपकी अपनी खोज के दाईं ओर आप केवल प्रति नीचे दिए गए अपने कोड के कुछ बदलने की जरूरत पर सबमिट बटन दिखाने के लिए। बटन के कोड से बाएं संरेखण को हटा दें। और बटन को 34 पीएक्स

<input type="text" value="" placeholder="search text here" style="display: block; width: 100px; height: 32px; margin: 0px; padding: 0px; float: left;" /> 
     <input type="submit" value=" OK " style="display: block; margin: 0px; width: 40px; height: 34px; padding: 0px; " /> 

Answer 8

मैंने HTML मार्कअप में कुछ बदलाव किए हैं। मैंने इनपुट बॉक्स को divs में लपेट लिया और इनपुट बॉक्स के बजाय divs को चौड़ाई और ऊंचाई सौंपा।

एचटीएमएल

<div class="mainCls"> 
    <div class="textCls"> 
     <input type="text" value="" placeholder="search text here" /> 
    </div> 
    <div class="submitCls"> 
     <input type="submit" value=" OK " /> 
    </div> 
</div> 

सीएसएस

input[type=text], input[type=submit] { 
    margin: 0px; 
    padding: 0px; 
    position: absolute; 
    top: 0; 
    right: 0; 
    left: 0; 
    bottom: 0; 
    display: block; 
} 
div.mainCls { 
    height: 35px; 
    position: relative; 
    border: 1px solid green; 
    display:inline-block; 
} 
.mainCls>div { 
    float: left; 
    position: relative; 
    height: 100%; 
} 
.textCls { 
    width: 100px; 
} 
.submitCls { 
    width: 30px; 
} 

Working Fiddle

इनपुट बॉक्स निर्धारित चौड़ाई के हैं, तो आपके मामले में के रूप में, तो कोई जरूरत नहीं है बाल div का मैं अब abo इस्तेमाल किया कर दिया है। आप पर left: 100px; /* width of the input text */ जोड़ सकते हैं।

Answer 9

मैं एक खोज बॉक्स के लिए यह वही कार्य पूरा किया, मुझे उम्मीद है कि यह किसी की मदद कर सकता है।

<input type="text" name="id" id="seacrhbox" class="form-control" 
placeholder="Type to search" style="width:300px;display:inline-block;margin-right: 25px;"/> 

<input type="submit" value="Search" class="btn-success" style="height:32px; 
width:80px;font-weight: 600;" /> 

Additionaly:

(प्रश्न से संबंधित नहीं) आप एक एएसपी/MVC उपयोग में एक पाठ बॉक्स के मूल्य बनाए रखने के लिए करना चाहते हैं:

value="@Request["id"]" लेकिन आप इसे करना चाहते हैं एचटीएमएल में this