6

如何将按钮（提交）精确对齐到文本或搜索框的右侧，
与搜索框高度相同，
并且搜索框和按钮之间没有任何水平空白？

这就是我所拥有的

<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 毫米的空间。

4

10 回答 10

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

于 2013-08-13T06:16:59.680 回答
1

使用 CSS 为按钮添加高度。

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

然后将高度添加到textboxusingstyle属性并检查高度是否匹配。

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

于 2013-08-13T06:12:34.313 回答
1

要在搜索的右侧显示您的提交按钮，您只需按照下面给出的更改一些代码。从按钮的代码中删除左对齐。并给按钮是 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; " />
于 2013-08-13T06:31:33.720 回答
1

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

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

于 2020-02-13T01:57:15.307 回答
0

把它放在一个段落标签中，不需要 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>
于 2013-08-13T06:01:16.023 回答
0

增加宽度，例如

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

于 2013-08-13T06:02:13.777 回答
0

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

于 2013-08-13T06:12:51.310 回答
0

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

工作小提琴

如果输入框的宽度是固定的，就像你的情况一样，那么就不需要我上面使用的子 div。您只需添加left: 100px; /* width of the input text */到submit button.

于 2013-08-13T06:44:14.057 回答
0

啊，我明白了。

同时有两个问题。
首先，输入 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>
于 2013-08-13T11:18:26.733 回答
0

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

<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 来做，试试这个

于 2015-03-30T08:22:28.220 回答