CSS对齐表单输入和内嵌块元素 [英] CSS aligning form inputs and inline-block elements

问题描述

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

I would like to align my icon elements with the form inputs. This is what I have so far:

jsfiddle

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

和css：

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

您会注意到元素并没有按照直线排列我曾希望。首先是什么财产造成这种情况？其次，什么是最直接排列元素的最合适的方法？

You'll notice that the elements don't align in a straight line as I had hoped. Firstly what property is causing this? And secondly what is the most appropriate way to align the elements in a straight line?

推荐答案

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

Inline block elements, by default, align to the baseline of the previous element.

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

All you need to do is vertically align the input to the top of the icon.

.ctr input
{
    vertical-align: top;
}

JSFiddle

这篇关于CSS对齐表单输入和内嵌块元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！