html - 在输入旁边放置一个按钮，适用于所有浏览器

Question

我有一个输入(包含一个数字)，我想在其旁边放置一个按钮。按下此按钮后，框中的值将增加 1。

尽管如此，我还是花了很多时间在所有浏览器中排列它。

我尝试使用 button、img 和 a 来完成此操作。 img 在大多数浏览器中无法正确排列。这意味着如果我将 input 和 img 放在一起，img 会比输入高几个像素，但这会有所不同通过浏览器。我能得到的最接近的方法是使其成为一个使用 css 样式的 button 来使用我的自定义图像。它适用于 Chrome、ie7 和 ie10。然而，在 ie8、ie9 和 firefox 中，它太高了 1 个像素，我一辈子都无法让它们对齐。

我读到here漂浮会让他们排成一排。果然，确实如此。但现在输入和按钮卡在它们所在的 td 边缘，我不知道如何移动它们。也许有比 float 更好的方法吗？或者只是一种将它们正确排列的方法？

This这就是我遇到问题的地方。在 Chrome 和 ie7、ie10 中工作正常。它在 ie8,9 和 firefox 中出现困惑。

This就是它与 float 的样子。它在上述所有浏览器中都显示正确，但现在偏离中心。

有什么建议吗？

Answer 1

好的。这是一种方法。所以我想你可能会喜欢 vertical-align: middle; 它只适用于内联和内联 block 元素，使它们相互对齐。所以它不会将它们在盒子内对齐。我做了一个小沙箱来测试你的问题HERE 。我不确定你的限制，但现在我在大多数事情上都使用 box-sizing: border-box; - 所以在查看代码时需要注意这一点。我在浏览器堆栈中检查了它，大多数情况下一切似乎都很好。根据我的经验，这始终是一项艰巨的任务。我保留了下面 CSS 中的要点，但是 codepen 中有一堆注释、样式和东西。我希望这有帮助!祝你好运!

HTML

<div class="wrapper">

  <input class="your-input" type="number" /><button class="your-button">+</button>

</div>

CSS

* { 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
}

.wrapper {
  float: left;

  height: 4em; /* needs to be defined in this case so that the children know what they should be 100% height of */

  /* just for show */
  background-color: lightgray;
  border: 1px solid red;
  padding: .5em;
}

.your-input, .your-button {
  display: inline-block;
  /* aligned to each other and not the .wrapper */
  height: 100%;
  /* already was inline by dephault - but just to be clear */
  vertical-align: middle;
}

.your-input {
  margin: 0;
  padding: 0;
  width: 20em; /* arbitrary */
  text-indent: 1em;

  border: 1px solid black;
}

.your-button{
  /* whatevers */
  background: lightblue;
  border: 1px solid black;
  border-left: 0;
  width: 6em;
  border-radius: 0 10px 10px 0;
  cursor: pointer;
}