输入宽度百分比表现不正常

Question

我希望我的输入字段是容器宽度的98％。问题是当我将其设置为98％宽度时，输入会从屏幕上消失。有没有一种特殊的方法来定义输入的宽度或什么？

这是我的HTML：

<div class="large-12 columns centered">
     <input class="typeahead" type="text" placeholder="Start typing to search"  spellcheck="false" autofocus />
</div>

这是我的CSS：

input {
    padding: 0.8rem 0.9rem;
    height: inherit;
    font-size: 1.25rem;
    margin: 0 0 .5rem 0;
    display: block;
    width: 98%;
}

但由于某种原因，这是结果：

Answer 1

尝试为输入提供box-sizing，以便输入的宽度和高度也考虑填充。

input {
    padding: 0.8rem 0.9rem;
    height: inherit;
    font-size: 1.25rem;
    margin: 0 0 .5rem 0;
    display: block;
    width: 98%;
    box-sizing:border-box;
}

Answer 2

这是因为元素的最终宽度是使用width + padding + border计算的，这称为box-sizing。

添加以下CSS应该修复它：

box-sizing: border-box;

Answer 3

使用box-sizing应该有效：

input {
    width: percentage you want%;
    box-sizing: border-box;
}