如何在没有边距的情况下将按钮对齐到文本框的右侧？

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

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

或检查 Fiddle http://jsfiddle.net/Ggg2b/9/

Answer 2

要在搜索右侧显示您的提交按钮，您只需按照以下给出的更改部分代码。从按钮的代码中删除左对齐。并给按钮是 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 3

使用 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 4

解决此问题的一种方法是将文本输入和按钮放在使用网格布局的容器中。使用下面的简单代码，您需要在容器上添加宽度限制，因为它将扩展到最大可能的宽度：

.joined {
  display: grid;
  grid-template-columns: 1fr auto;
}

<section class="joined">
  <input type="text"></input>
  <button>Go</button>
</section>

这是一个示例，展示了它如何在应用其他尺寸设置的情况下自动调整/增长：

.joined-2 {
  display: grid;
  grid-template-columns: 1fr auto;
  
  min-width:280px;
  width: 80vw;
}

input {
  height:100px;
}

<section class="joined-2">
  <input type="text"></input>
  <button>Go</button>
</section>

Answer 5

把它放在一个段落标签中，就不需要 float:left

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

增加宽度，比如说

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

Answer 7

我对 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。您只需将left: 100px; /* width of the input text */ 添加到submit button。

Answer 8

将它们放入容器中，设置修复容器的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>

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 9

啊，我明白了。

同时有两个问题。
首先，输入 1 的结尾和输入 2 的开头之间可能没有空格。
一个已知的 IE 错误。

然后，对于与文本框大小相同的按钮，需要应用 box-sizing 属性

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

我为搜索框完成了同样的任务，我希望这可以帮助某人。

<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