如何制作元素宽度:100%减去填充?

html CSS

逆天LEY

2020-03-20

我有一个html输入。

输入有padding: 5px 10px;我希望它是父div宽度的100%(可变)。

但是,使用width: 100%;导致输入100% + 20px如何解决呢?

第2427篇《如何制作元素宽度:100%减去填充?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

13个回答
AGO 2020.03.20

你可以这样做:

width: auto;
padding: 20px;
阳光西里小哥 2020.03.20

对我来说,使用margin:15px;padding:10px 0 15px 23px;width:100%,结果是这样的:

在此处输入图片说明

对我来说,解决方案是使用width:auto而不是width:100%我的新代码是:

margin:15px;padding:10px 0 15px 23px;width:auto然后元素正确对齐:

在此处输入图片说明

梅猪猪 2020.03.20

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

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

在此处查看示例:http : //jsfiddle.net/L7wYD/1/

乐米亚 2020.03.20

只需了解width:auto;之间的区别即可;宽度:100%宽度:自动; 将(自动)自动计算宽度,以适合包含padding的包装div给出的精确值。宽度100%会扩展宽度并添加填充。

小胖Itachi 2020.03.20

将其包装在容器中怎么样?容器应具有以下样式:

{
    width:100%;
    border: 10px solid transparent;
}
Harry逆天Eva 2020.03.20

尝试这个:

width: 100%;
box-sizing: border-box;
Mandy宝儿 2020.03.20

您可以尝试一些定位技巧。您可以将输入放在具有position: relative和固定高度的div中,然后在输入上包含position: absolute; left: 0; right: 0;以及所需的任何填充。

现场例子

村村伽罗Mandy 2020.03.20

这是codeontrack.com的建议,其中包含良好的解决方案示例:

而不是将div的宽度设置为100%,而是将其设置为auto,并确保将<div>设置为display:block(默认为<div>)。

阳光Davaid 2020.03.20

box-sizing: border-box 是一种快速,轻松的解决方法:

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

这是一个演示:http : //jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

-webkit-box-sizing现代浏览器不需要浏览器前缀版本(,等)。

GilJim 2020.03.20

使用CSS calc()

超级简单又给力。

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

如此处所示:Div宽度100%减去固定像素
数(通过webvitaly)(https://stackoverflow.com/users/713523/webvitaly
原始来源:http : //web-profile.com.ua/css/dev/css -width-100prc-minus-100px /

只是将其复制到这里,因为我在另一个线程中几乎错过了它。

DavaidPro 2020.03.20

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

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

这样会将内部部分拉伸到任何宽度,但应小于两侧的15px。

飞云Jim梅 2020.03.20

This is why we have box-sizing in CSS.

I’ve edited your example, and now it works in Safari, Chrome, Firefox, and Opera. Check it out: http://jsfiddle.net/mathias/Bupr3/ All I added was this:

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

Unfortunately older browsers such as IE7 do not support this. If you’re looking for a solution that works in old IEs, check out the other answers.

村村小小十三 2020.03.20

也使用百分比填充,并从宽度中删除:

填充:5%;
宽度:90%;

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android