输入宽度百分比不正确

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

使用箱大小应该工作：

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