Question

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％以匹配其他一些东西。）

感谢。

Answer 1

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

更多信息：

CSS：使用填充的中心输入百分比

1 个答案: