宽度：100％填充？

我有一个html输入。

输入具有padding: 5px 10px; 我希望它是父div宽度的100％（可变）。

但是使用width: 100%; 导致输入为100% + 20px ，我该如何解决？

例

#1楼

您可以在不使用box-sizing情况下进行操作，也不必使用诸如width~=99%类的不清楚的解决方案。

jsFiddle上的演示 ：

保持输入的padding和border
添加到输入的负水平margin = border-width + horizontal padding
添加到输入的包装器水平padding等于上一步中的margin

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 */ 
}

#2楼

你可以这样做：

width: auto;
padding: 20px;

#3楼

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

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

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

干杯

安迪

#4楼

使用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/

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

#5楼

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

{
    width:100%;
    border: 10px solid transparent;
}

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3166131

标签

padding