CSS 对齐表单输入和内联块元素答案

【问题标题】：CSS aligning form inputs and inline-block elementsCSS 对齐表单输入和内联块元素
【发布时间】：2015-03-29 11:55:57
【问题描述】：

我想将我的图标元素与表单输入对齐。这是我目前所拥有的：

jsfiddle

<div class="ctr">
    <div class="icon-ctr">
        <span class="icon"></span>
    </div>
    <input type="text" />
</div>

和css：

.ctr {
    font-size: 0;
}

.ctr input {
    font-size: 14px;
    line-height: 14px;
    height: 14px;
    width: 100px;
    padding: 13px;
    border: 1px solid #000;
}

.icon-ctr {
    display: inline-block;
    height: 16px;
    padding: 12px;
    border: 1px solid #000;
    margin-right: -1px;
}

.icon {
    display: inline-block;
    height: 16px;
    width: 16px;
    background-color: #f00;
}

您会注意到元素并没有像我希望的那样在一条直线上对齐。首先是什么属性导致了这种情况？其次，将元素对齐在一条直线上的最合适的方式是什么？

【问题讨论】：

我会将输入包装在一个与图标 div 具有相同高度的 div 中。这样您就可以正确对齐两者的内容。另外，不要使用填充来居中，使用垂直对齐。 developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
我知道，如果您使用 float: left 而不是 display: inline-block，它们会正确排列。有趣的是，内联块不起作用，我要检查一下。

标签： html css

【解决方案1】：

内联块元素，默认对齐前一个元素的基线。

您需要做的就是将输入垂直对齐到图标的顶部。

.ctr input
{
    vertical-align: top;
}

JSFiddle

【讨论】：

虽然其他答案很好并回答了如何解决问题，但这个答案给出了我所描述的问题的原因。工作，并解释为什么浮动元素也可以工作，因为浮动元素从正常流程中取出，然后不相对于前一个元素的基线定位。

【解决方案2】：

在.icon-ctr中使用添加float: left;

.ctr {
  font-size: 0;
}
.ctr input {
  font-size: 14px;
  line-height: 14px;
  height: 14px;
  width: 100px;
  padding: 13px;
  border: 1px solid #000;
}
.icon-ctr {
  display: inline-block;
  float: left;
  height: 16px;
  padding: 12px;
  border: 1px solid #000;
  margin-right: -1px;
}
.icon {
  display: inline-block;
  height: 16px;
  width: 16px;
  background-color: #f00;
}

<div class="ctr">
  <div class="icon-ctr">
    <span class="icon"></span>
  </div>
  <input type="text" />
</div>

【讨论】：