使用佔位符設計輸入

Question

我即將自殺，因爲我無法將此輸入全寬。反正這裏是我的代碼：

.outer{ 
    background: #111; 
    width: 600px; 
    text-align: center; 
    margin 20px auto; 
    border-radius: 20px; 
    padding: 20px; 
} 
input{ 
    width: 100%; 
    padding: 10px; 
    color: white; 
    background: #333; 
    border: 2px solid #666; 
    border-radius: 10px; 
} 

，這是我的html代碼：

<div class="outer"><form action="" method="post"> 
    <input name="name" placeholder="Your Name"> 
</form></div> 

我在與這些代碼的問題。我寫了寬度：100％，但輸入長度超過600像素。我將在一個響應式模板中使用它。所以我必須這樣做。但我做不到！如果我刪除填充，那麼它看起來很正常。但我需要在這裏填充代碼。我能做什麼？

Answer 1

如果您將box-sizing添加到您的輸入樣式並從.outer中刪除寬度，它將是100％。

CSS：

.outer{ 
    background: #111; 
    text-align: center; 
    margin 0px auto; 
    border-radius: 20px; 
    padding: 20px; 
} 

input{ 
    width: 100%; 
    padding: 10px; 
    color: white; 
    background: #333; 
    border: 2px solid #666; 
    border-radius: 10px; 
    -webkit-box-sizing : border-box;‌​ 
    -moz-box-sizing : border-box; 
    box-sizing : border-box; 
} 

這裏是一個working fiddle。