Question

我想将我的图标元素与表单输入对齐。这就是我到目前为止所做的：

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

你会发现元素没有像我希望的那样直线排列。首先是什么财产造成这种情况？其次，以直线对齐元素的最合适方法是什么？

Answer 1

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

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

.ctr input
{
    vertical-align: top;
}

JSFiddle

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

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

2 个答案: