输入有额外的宽度

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+ */
}