Question

我正在寻找一种解决方案，在没有标准宽度但是百分比的容器中添加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>

任何人都可以帮我实现吗？

由于

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

Answer 2

尝试从Float:left Div中删除formElement，然后将style="border:solid 1px #333; padding:5px;"添加到formRow div

Answer 3

试试这个：

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

在容器内固定3px的填充，宽度为百分比

3 个答案: