2

我有一个输入（包含一个数字），我想在旁边放一个按钮。当按下此按钮时，框内的值将增加 1。

不过，我花了很长时间在所有浏览器中排列它。

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

我在这里读到浮动会使它们排成一行。果然，它做到了。但是现在输入和按钮卡在它们所在的边缘td，我不知道如何移动它们。有没有比浮动更好的方法？或者只是一种正确排列它们的方法？

这就是我遇到问题的方式。在 Chrome 和 ie7 中，ie10 运行良好。它在ie8,9和firefox中搞砸了。

这就是它在浮动时的样子。它在上述所有浏览器中都显示正确，但现在偏离中心。

有什么建议么？

4

3 回答 3

3

好的。这是一种方法。所以我想你可能会喜欢vertical-align: middle;它只适用于将它们相互对齐的内联和内联块元素。所以它不是在一个盒子里对齐它们。我做了一个小沙箱来测试你的问题在这里。我不确定您的限制，但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;
}
于 2013-08-13T05:49:49.310 回答
2

您可能需要考虑使用引导库。请参阅此处的“前置和附加输入” 。他们在浏览器兼容性方面做得很好。您可以进一步细化 l&f，以便它更好地匹配您在示例中的内容。

于 2013-08-13T04:35:58.830 回答
0

我想出了一种方法来解决我的问题，但仅适用于 ie8+，这对我来说是令人满意的。

结构如下所示：

<input class="add_input" type="text" name="qty" value="0" /><a class="add">
    <img src="plus.png"/>
</a>

input和 the之间不能有空格或换行，a否则会使它们错位。图像本身就是“+”，仅此而已。然后我使用 CSS 将图像设置为我想要的形状，并使用适当的:hover和:active选择器。

这是CSS：

.add_input{
    width:28px;
    height:18px;
    padding:1px 0;
    display:inline-block;
    text-align:center;
    border:1px solid #0a1c40;
    border-right:0;
    vertical-align:bottom;
}

.add img{
    background:url(add.png);
    display:inline-block;
    width:18px;
    height:20px;
    border:1px solid #0b1e45;
    border-radius:0px 12px 12px 0px;
    vertical-align:bottom;
}
.add img:hover {
    background:url(add_hover.png);
}
.add img:active {
    background:url(add_active.png);
}

我注意到其他vertical-align类型是否可行，我只知道底部可以。

于 2013-08-18T04:10:34.217 回答