我有一个html输入。
输入有填充:5px 10px;我希望它是100%的父div的宽度(这是流体)。
然而使用宽度:100%;导致输入为100% + 20px我怎么才能解决这个问题呢?
例子
我有一个html输入。
输入有填充:5px 10px;我希望它是100%的父div的宽度(这是流体)。
然而使用宽度:100%;导致输入为100% + 20px我怎么才能解决这个问题呢?
例子
当前回答
也许浏览器在上次回答这个问题后已经发生了变化,但这是我唯一可靠地完成这个任务的方法:
width: auto;
left: 0;
right: 0;
然后你可以随心所欲地设置边距/填充,元素不会扩展到超出其可用宽度的范围。
这类似于@andology的答案,但如果你把左/右都设为0,那么你可以设置你想要的空白和/或填充。这是我的默认div。
其他回答
也使用百分比填充,并从宽度中删除:
padding: 5%; width: 90%;
也许浏览器在上次回答这个问题后已经发生了变化,但这是我唯一可靠地完成这个任务的方法:
width: auto;
left: 0;
right: 0;
然后你可以随心所欲地设置边距/填充,元素不会扩展到超出其可用宽度的范围。
这类似于@andology的答案,但如果你把左/右都设为0,那么你可以设置你想要的空白和/或填充。这是我的默认div。
以下是来自codeontrack.com的推荐,其中有很好的解决方案示例:
不要将div的宽度设置为100%,而是将其设置为auto,并确保<div>设置为display: block(默认为<div>)。
把它包在容器里怎么样?容器应该有这样的风格:
{
width:100%;
border: 10px solid transparent;
}
你可以尝试一些定位技巧。你可以把输入放在一个具有position: relative和固定高度的div中,然后在输入上有position: absolute;左:0;右:0;,以及任何你喜欢的填充。
生活的例子