CSS：百分比定心输入与填充

HTML（一种形式的一部分）：CSS：百分比定心输入与填充

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

谢谢。

来源

2013-08-23 Nick

添加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-23 22:53:09 thirtydot

太棒了！我前一段时间读过它，但忘了:(感谢这个和'caniuse'链接。 – Nick

CSS：百分比定心输入与填充

回答

相关问题