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

或查看小提琴http://jsfiddle.net/Ggg2b/9/

Answer 2

使用CSS为按钮添加高度。

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

然后使用textbox属性为style添加高度，并检查高度是否匹配。

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

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

将它放在段落标签中，不需要浮动：左

 <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

将它们放入容器中，设置容器的修复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 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了。您只需将left: 100px; /* width of the input text */添加到submit button。

即可

Answer 9

啊，我明白了。

一次有两个问题首先，在输入1的结尾和输入2的开始之间可能没有空白一个已知的IE bug。

然后，对于与文本框大小相同的按钮，必须应用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

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

10 个答案: