输入宽度百分比行为不正确答案

【问题标题】：Input width percentage not behaving correctly输入宽度百分比行为不正确
【发布时间】：2014-04-01 21:20:09
【问题描述】：

我希望我的输入字段是它所在容器宽度的 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%;
}

但由于某种原因，结果如下：

【问题讨论】：

没关系，有一个外部 CSS 文件导致了这个问题，现在已经解决了。

标签： css html input width

【解决方案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;
}

【讨论】：

【解决方案2】：

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

添加以下 CSS 应该可以解决它：

box-sizing: border-box;

【讨论】：

【解决方案3】：

使用 box-sizing 应该可以工作：

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

【讨论】：