如何将按钮对齐到没有边距的文本框的右侧？ [英] How to align a button to the right of text box without margin?

问题描述

如何将按钮（提交）完全对齐到文字或搜索框的右侧，

与搜索框的高度相同，

和没有搜索框和按钮之间的任何水平空白区域？

How can I align a button (submit) exactly to the right of a text or search box,
with the same height as the search box,
and without any horizontal white-space between search box and button ?

这是我所拥有的

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

But neither is the button the same height as the textbox
, and more importantly, I don't seem to be able to get rid of that 0.5 to 1mm space between text-box and button.

推荐答案

啊，我得到了。

Ah, I got it.

一次有两个问题。

首先，在输入1的结束和输入2的开始之间可能没有空格。

已知的IE错误。

There are two problems at once.
First, there may be no white-space between end of input 1 and start of input 2.
A known IE bug.

然后，对于大小相同的按钮作为文本框，有必要应用框大小属性

And then, for the buttons being the same size as the text-box, it's necessary to apply the box-sizing property

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

这篇关于如何将按钮对齐到没有边距的文本框的右侧？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！