ボタンをマージンなしでテキストボックスの右に揃える方法は？

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〜1mmのスペースを取り除きます。 paragrapghタグとフロートのためにそこ不要でこれを入れ

Answer 1

ああ、私はそれを持っています。

すぐに2つの問題があります。
最初に、入力1の終わりと入力2の開始の間に空白がないことがあります。
既知のIEのバグです。

そして、ボタンは、テキストボックスと同じサイズであるため、それはボックスのサイズ変更プロパティにこのよう

-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

は：幅を増やし

<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

はCSSを使用してボタンに高さを追加しますと言います。

.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;を使用する場合は、コンテナのwidthとheightを使わずに、borderとpaggingを追加できます。

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> 

CSS：

.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 px

<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マークアップにいくつか変更を加えました。私はdivの入力ボックスをラップし、入力ボックスの代わりにdivに幅と高さを割り当てました。

HTML

<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> 

CSSは

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のve。 submit buttonにはleft: 100px; /* width of the input text */を追加するだけです。

Answer 9

私は私はこれが誰かを助けるかもしれないことを願っています。 Additionaly

<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;" /> 

：

（質問とは関係ありません）あなたは、ASP/MVC使用中のテキストボックスの値を保持したい場合：

value="@Request["id"]"あなたはそれをしたい場合htmlで試してみてくださいthis