css - 输入额外宽度

Question

我在一个 div 中创建了 3 个输入框，输入框的样式设置为 269px 宽度，但是当我在浏览器中查看它时显示额外的 2px 如何阻止它这样做。我在右边设置了 5px 的边距，但在第三个设置为 0。

input {
    text-indent: 5px;
    height: 45px;
    color: #ffffff;
    width: 269px;
    margin-right: 5px;
    background-color: #0A4E6E;
    border: none;
    font-family: Helvetica Neue;
    font-size: 22px;
    display: block;
    float: left;
}

Answer 1

这很可能是导致问题的边界。尝试使用 box-sizing:border-box; 使它们在浏览器中更加一致。

input[type=text]{ 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}