对输入框和按钮进行样式设置 - 高度问题

Question

我正在尝试设置一个干净的CSS来样式化按钮，使其在视觉上与附近的输入字段合并。

我目前正在使用以下CSS：

button {
    position: relative;
    left: -4px;
    box-sizing: border-box;
    padding: 0 10px;
    margin: 0;
    font-size: 17px;
    border: 1px solid gray;
    border-radius: 0 3px 3px 0;
}

http://jsfiddle.net/GRwqL/

主要问题是使用left属性，我认为这不是一个好的做法，因为它在所有浏览器上都没有得到正确处理。
另一个问题是，在Internet Explorer和Firefox中，此代码会使按钮高度与输入字段不一致。

因此，我正在寻求帮助编写更好的跨浏览器和更干净的代码。
个人认为，如果需要包装元素或任何其他HTML元素，我并不在意，我只需要一个干净的代码，跨浏览器，并且可以正常工作。

- Fez Vrasta

---

这主要是因为并非所有浏览器都正确处理它。 - j08691

几乎每个浏览器上的按钮都会与正确位置有所偏差。在Chrome上需要3像素，在Firefox上只需要1像素。 - Fez Vrasta

请查看Bootstrap的“Prepended and appended inputs”。 源网址：http://getbootstrap.com/2.3.2/base-css.html#forms - Milche Patern

谢谢，但我不想使用Bootstrap，我只是在寻找一个简单的CSS来解决这个问题，标记为正确答案的回答提供了一个很好的解决方法。 - Fez Vrasta

Answer 1

你需要覆盖默认的margin样式，并将其应用到input元素上。 这里有一个 jsFiddle 示例。

input, button {
    margin:0;
}

这样做可以消除元素之间的空格，但前提是在标记中它们之间也没有空格。请注意，inline元素会保留标记中的空格。

例如：即使重置默认的margin, 如果标记中它们之间有空格，元素之间还是会有空隙（参见示例）。

---

要解决第二个问题（让所有元素高度相同），请执行以下操作：

input, button {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding:0;
    margin:0;
    vertical-align:top;
    line-height:30px;
    height:30px;
}

基本上，使用box-sizing来改变盒模型，重新设置margin/padding，使用vertical-align:top解决对齐问题，然后在两个元素上设置相等的line-height/height。

jsFiddle示例

- Josh Crozier

---

我认为填充应该不重要。 - Alex W

@AlexW 如果你没有改变盒模型，元素的高度是很重要的。 - Josh Crozier

谢谢，现在完美了。顺便说一下，使用box-sizing:border-box可以计算填充，所以没关系。我会等一会儿再把你设置为正确答案，看看是否有更好的想法。 - Fez Vrasta

@JoshC 这与你使用line-height和height的更新有关，但是填充(padding)只应影响垂直对齐。 - Alex W

@AlexW 是的，你说得对。我以为你在提到第二个问题时说的是那个。 - Josh Crozier

我刚刚注意到，甚至line-height也不需要。 - Fez Vrasta

Answer 2

<span class="inputWithButton">
  <input type="text"><button>Submit</button>
</span>

 input, button{outline: none;}

.inputWithButton{
    display:inline-block;
    overflow:hidden;
    border:1px solid gray;
    border-radius: 3px;
}
.inputWithButton > *{
    vertical-align:top;
    border:0;
    margin:0;
    padding: 3px 10px;
}
.inputWithButton > input[type=text]{
    width:150px;
}
.inputWithButton > button{
    border-left:1px solid gray;
    background:#eee;
    cursor:pointer;
    width:70px;
}
.inputWithButton > button::-moz-focus-inner {
  border: 0;
}

DEMO with higher paddings and different borders colors : http://jsbin.com/OPiroyib/4/edit

^{(Just remove border from the span and add border to both input and button) That easy.}

- Roko C. Buljan

---

@FezVrasta，除此之外，我没有时间自己测试那个答案，但我给了你一个不错的方法来做，并提供了我可用的所有浏览器的截图，只是忘了截IE9+，但它在FF中显示出来。 - Roko C. Buljan

我猜测IE8及以下版本，我更喜欢将支持更多浏览器的答案设置为最佳答案。 - Fez Vrasta

@JoshC 举个例子，在火狐浏览器中，IE8 真是太糟糕了 http://i.imgur.com/gOuCVkT.jpg 更不用说所有其他浏览器中宽度、行高等方面的差异了... - Roko C. Buljan

好的，我在使用你的版本时遇到了问题，也许最好将JoshC的答案再次设置为正确的:S http://codepen.io/anon/pen/bgicd - Fez Vrasta

好的，但我不想要整个元素的边框，只想在输入框的三个侧面上有，所以我需要再次使用box-sizing。 - Fez Vrasta

Answer 3

你有没有考虑使用简单的标签代替按钮，然后将onclick事件附加到它上面？ 以下代码对我来说似乎可以正常工作 - 但是你可能需要使用重置/现代化样式表来使其在不同的浏览器上更可预测。

http://jsfiddle.net/GRwqL/13/

<input class="nospace"></input><span class="nospace">Submit</span>

.nospace {
    margin: 0;
    padding: 0;
}

span.nospace {
   height: 1em;
   margin: 0;
   padding: 1px;
   border: 1px solid black;
}

- Dan Murphy

---

使用“button”元素在语义上是正确的，而将span元素作为按钮则不是。两个元素都可以重置以看起来相同，因此无论我使用哪种HTML元素作为按钮都没有关系。 - Fez Vrasta

Answer 4

看一下css-reset或normalize.css，将所有浏览器的默认设置设置为“null”。
此外，像bootstrap这样的CSS框架非常棒！

- chris

---

我认为“null”不是有效的CSS。 - Alex W

我想它给了个想法。 - Fez Vrasta