CSS - Nhập ở 100% chiều rộng chồng chéo div

Question

Tôi đang cố sửa một hộp nhập thông thường bằng đệm, đường viền, bên trong một div có đệm. Tuy nhiên, tôi muốn đầu vào có chiều rộng là 100% nhưng bạn có thể thấy, nó trùng lặp. Làm thế nào để sửa lỗi này?

CSS

#one { 
    background:red; 
    width:300px; 
    padding:5px; 
} 
#two { 
    width:100%; 
    border:3px solid blue; 
    padding:4px; 
} 

HTML

<div id="one"><input type="text" value="Test" id="two" /></div>​ 

Answer 1

Thêm box-sizing: border-box. Nếu không, chiều rộng là 100%, CỘNG VỚI đường viền và đệm.