CSS：百分比定心輸入與填充

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

的更多信息：

• https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
• http://www.w3.org/TR/css3-ui/#box-sizing
• http://caniuse.com/css3-boxsizing