宽度:100%-填充?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (10)
  • 关注 (0)
  • 查看 (87)

我有一个html输入。

输入有:5px 10px;我希望它100%的父div的宽度(这是流体)。

然而使用宽度:100%;导致输入是100% + 20px我怎么才能绕过这个?

提问于
用户回答回答于

在这里阅读其他答案,或者阅读这个答案:当宽度设置为100%时,div的内容将会更长。

箱体尺寸:包装箱是一种快速、简便的修复方法:

这将适用于所有的现代浏览器和IE8+。

如果你需要在IE7中工作,你可以阅读这个答案的旧版本。

用户回答回答于

理解宽度的区别:auto;宽度:100%;宽度:auto;将(自动)自动地计算宽度,以便与包括填充在内的包装div的精确匹配。宽度100%扩展宽度并添加填充。

用户回答回答于

将输入框的填充移动到包装器元素。

<style>
div.outer{ background: red; padding: 10px; }
div.inner { border: 1px solid #888; padding: 5px 10px; background: white; }
input { width: 100%; border: none }
</style>

<div class="outer">
    <div class="inner">
       <input/>
    </div>
</div>
用户回答回答于

下面是codeontrack.com的推荐,它有很好的解决方案示例:

不要将div的宽度设置为100%,而是设置为auto,并且要确定,

将被设置为display: block(默认为

)。

用户回答回答于

你可以尝试一些定位技巧。你可以把输入放在一个有位置的div中:相对的和一个固定的高度,然后输入的位置是:绝对的;左:0;对:0,以及任何你喜欢的填充。

用户回答回答于

假设我在一个有15px填充的容器中,这就是我一直使用的内部部分:

width:auto;
right:15px;
left:15px;

这将把内部的部分延伸到宽度应该小于15px的两边。

Andy

用户回答回答于

使用css calc()

超级简单,太棒了。

input {
width: -moz-calc(100% - 15px);
width: -webkit-calc(100% - 15px);
width: calc(100% - 15px);
}​

如图所示:Div宽度100%减去固定像素。

把这个复制过来,因为我在另一个线程中漏掉了。

用户回答回答于

您可以在不使用方框大小的情况下完成它,而不使用宽度~=99%的清晰解决方案。

jsFiddle演示:

  • 保持输入的填充和边框。
  • 增加输入负水平边距=边框宽度+水平填充。
  • 添加到输入的包装器水平填充,等于前面步骤的边缘。

HTML标记:

<div class="input_wrap">
    <input type="text" />
</div>

CSS:

div {
    padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container's width */ 
    padding: 5px 10px;
    border: none;
    margin: 0 -10px; /* negative margin = border-width + horizontal padding */ 
}
用户回答回答于

在百分比中使用填充,并从宽度中移除:

padding: 5%;
width: 90%;
用户回答回答于

这就是为什么我们要在CSS中设置方框大小的原因。

我已经编辑了您的示例,现在它在Safari、Chrome、Firefox和Opera中运行。

input {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

不幸的是,像IE7这样的老浏览器并不支持这一点。如果你正在寻找一种能在老一代中有效的解决方案,那就看看其他的答案。

扫码关注云+社区

领取腾讯云代金券