我正在寻找一种解决方案,在没有标准宽度但是百分比的容器中添加3px填充(总是必须是3px)。
这是问题所在。我有一个表单框架,其标签为20%,表单元素为80%
在容纳表单元素(80%)的容器内部,想要使用3px填充来包装具有背景的表单元素。这意味着表单元素将不再具有3px背景而且不会更少。
我已经尝试了一些解决方案,但到目前为止没有任何工作,因为我必须创建一个容器宽度80%和3px填充和内部将表单元素的宽度设置为(80% - 3px)。
示例代码
<div id="formRow">
<label style="width:20%;float:left;"> Label </label>
<div id="formElement" style="width:80%;float:left;">
<input type="text" width="???????????" />
</div>
</div>
任何人都可以帮我实现吗?
由于
答案 0 :(得分:1)
@nthan;您可以像这样使用css3属性box-sizing
CSS:
#formElement{
padding:3px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width:80%;
}
注意:它在IE7中不起作用
修改强>
如果您不想使用css3,那么您可以将margin
提供给child
div,而不是将padding
提供给parent
div。
#formElement input{
margin:3px
}
可能是'为你工作。enter code here
编辑2
检查此链接是否正常http://jsfiddle.net/sandeep/Yf2zY/
答案 1 :(得分:0)
尝试从Float:left
Div中删除formElement
,然后将style="border:solid 1px #333; padding:5px;"
添加到formRow
div
答案 2 :(得分:0)
试试这个:
<div id="formRow" style="padding:0px 6px 0px 0px;">
<label style="width:20%;float:left;"> Label </label>
<div id="formElement" style="width:80%;float:left; padding:3px;margin-right:-6px">
input
</div>
</div>