1

HTML（表单的一部分）：

    <div class="container">
        <a id="p1_icon"></a>                                
        <input id="p1" class="input" name="p1" type="password" placeholder="Password">
    </div>

CSS：

.container {
    width:80%;
    margin-left:10%;
    margin-right:10%;  // Almost certainly unnecessary
    position:relative; // To allow the icon to be positioned in the input
}
.input {
    width:100%;
    padding: 10px 15px 10px 30px;  // The icon sits in the 30px padding-left.
    ... other styling
}
#p1_icon {
    @include sprite_index(20px, 20px, -1063px, -246px); // SASS to get the icon from the sprite
    position:absolute;
    top:9px;
    left:7px;              
}

当然，问题是填充.input被添加到 100% 宽度，因此它最终比容器宽（因此不居中）。

我怎样才能input完全填满容器？我可以用 JavaScript 很好地做到这一点，但如果存在的话，我想要一个适合移动设备的 CSS 解决方案。（注意：我需要用于自动生成的错误消息的容器。我还希望容器宽度保持在 80% 以匹配其他一些东西。）

谢谢。

4

1 回答 1

3

添加box-sizing: border-box到输入：

http://jsfiddle.net/thirtydot/QAtuX/

.input {
    width: 100%;
    padding: 10px 15px 10px 30px;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}

更多信息：

于 2013-08-23T22:53:09.210 回答