Question

我想使用DL / DT / DD方法来整理表单。我需要将它们构造为表格（标签列和值列）。以下html + css工作正常，但直到我添加边距或填充到dt和/或dd。

<html><head>
<style>
dl {
  width: 100%;
  overflow:hidden;
}

dt {
  float: left;
  width: 50%;
  margin: 0px;
  padding: 0px;
}
dd {
  float: left;
  width: 50%;
  margin: 0px;
  padding: 0px;
}
</style></head>
<body>
<dl>
  <dt>first name</dt>
  <dd><input />
</dl>
</body></html>

如果我将dt的样式中的“margin：0px”替换为“margin：5px”或填充相同，则dd元素会跳到下一行。

我需要：

DL
不要使用绝对宽度（因为我使用“50％”作为列的宽度）
为dt / dd添加一些边距/填充

如何添加边距/填充并保持相对宽度（50％/ 50％）？

P.S。我见过很多关于DL和表格布局的类似问题，但我的问题是关于dl +表格布局+相对宽度+填充的组合。我可以使用相对宽度或填充，但不能同时使用它们。

Answer 1

我现在找到了一个解决方案（在淋浴下！）

向左侧和右侧提供外部DL display:block和一些填充，这些填充会加到边距并填充DT和DD。现在，DL的100％是50％内部元素的基础。现在给出你想要的边距和填充。到目前为止它不会按预期工作。然而，还有一些事情要发生。分别添加DT和DD的所有边距和填充。并给每个边缘（左边DT和右边DD），所以它们的所有边距和填充加起来为零/零/ niente / nada。 EVoilà！现在，您可以拥有所需百分比的任意组合，例如： 30％ - 70％。

dl {
    display: block;
    overflow:hidden;
    padding: 5px 15px 5px 20px;

}

/* the -15px in the margin is to compensate for the 5px in the margin and the 2 x 5px in the padding */
dt {
    float: left;
    width: 30%;
    margin: 0px 5px 0 -15px;
    padding: 5px;
    background: yellow;
}
/* the -10px in the margin is to compensate for the 2 x 5px in the padding */
dd {
    float: left;
    width: 70%;
    margin: 0px -10px 0 0px;
    padding: 5px;
    background: yellow;
}

http://jsfiddle.net/HerrSerker/AADG7/

Answer 2

您只需要确保每个dt都清除以前的对齐方式;

添加

dt {
    clear:both;
}

到上面定义的css

请参阅http://jsfiddle.net/Nd2sH/

Answer 3

您只需指定magical property：box-sizing: border-box即可。然后，您可以在不增加宽度的情况下使用填充。

JSFiddle Demo

另请参阅：box-sizing support in ie7

box-sizing解决填充和边框问题，但不考虑边距。如果您还想使用保证金，请使用calc()从宽度中减去边距。例如，如果你想要一个5px左边距：

dd {
    margin: 0 0 0 5px;
    width: calc(50% - 5px);
}

但是，calc()在IE8或更早版本中不起作用。

CSS：将DL布局为带有填充的灵活表

5 个答案: