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

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 的开头之间可能没有空格
。这是一个已知的 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>