css - 输入宽度百分比不正确

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;
}