Question

我有以下小提琴：http://jsfiddle.net/stpra123/7cap7o7s/2/

第一个输入正确对齐icond，但是当我尝试使输入标签占据其宽度的100％时，我似乎无法弄清楚如何使图标正确对齐。有什么建议？我正在使用级联css框架和fontawesome。

<div class="site-body">
    <div class="site-center">
        <div class="cell">
            <form>
                <input id="first" value="I am correct!" />
                <i class="fa fa-calendar first"></i>
            </form>
            <form>
                <input id="second" value="I am a bit messed up!" />
                <i class="fa fa-calendar second"></i>
            </form>
        </div>
    </div>
</div>

form {
    margin-top: 30px;
}
#first {
    width: 90%;
    vertical-align: middle;
}
.first {
    position: relative;
    left: -30px;
}
#second {
    width: 100%;
    vertical-align: middle;
}
.second {
    position: relative;
    left: -30px;
}

编辑：我需要输入占据宽度的100％，因为我的下面的内容也占据了宽度的100％，如果我将输入设置为90％，那么与下面的内容相比，它看起来很有趣它

Answer 1

我会将输入标记包装在＆＃39; div＆＃39;标记：

<强> HTML

<div class="inputCont">
     <input id="second" value="I am a bit messed up!" />
     <i class="fa fa-calendar second"></i>
</div>

<强> CSS

.inputCont {
    position: relative;
    width: 100%;
}
.second {
    position: absolute;
    right: 4px;
    top: 8px;
}

Here's an updated jsFiddle

如果输入采用100％宽度，如何对齐此图标？

1 个答案: