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

【问题标题】：CSS: layout DL as flexible table with paddingsCSS：将 DL 布局为带有填充的灵活表格
【发布时间】：2012-01-18 16:29:01
【问题描述】：

我想使用 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 的 2 列表布局
不要使用绝对宽度（那是因为我使用“50%”作为列的宽度）
为 dt/dd 添加一些边距/填充

如何添加边距/内边距并保持相对宽度 (50%/50%)？

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

【问题讨论】：

您需要对 IE
如果你想要一张桌子，为什么不使用一张桌子？
@yunzen 是的，但我想知道至少如何为现代浏览器做到这一点
@yunzen 好吧，这都是关于语义与布局的。这些天桌子不是很受欢迎:)。我想使用语义标签
好吧，如果你有表格数据，表格是语义的。而表单可以被视为表格数据

标签： css

【解决方案1】：

您只需指定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 或更早版本中不起作用。

more on calc()

【讨论】：

【解决方案2】：

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

给外部DLdisplay:block 和一些左右填充，加起来就是边距和填充DT 和DD。现在 100% 的 DL 是 50% 的内部元素的基础。现在给这些你想要的边距和填充。到目前为止，它不会按预期工作。然而，还有一些事情要发生。分别将DT 和DD 的所有边距和内边距相加。并给每个负边距（左边的DT 和右边的DD），所以它们的所有边距和填充加起来为零/无/niente/nada。瞧！现在你可以有任何你想要的百分比组合，例如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/

【讨论】：

不错的解决方案。但说到 dl/dt/dd，我发现它很难使用。尝试使用以下标记：

first
name

Last name

但是，它确实与原始问题无关。

【解决方案3】：

您只需要确保每个 dt 清除之前的对齐方式即可；

添加

dt {
    clear:both;
}

到上面定义的css

见http://jsfiddle.net/Nd2sH/

【讨论】：

【解决方案4】：

我会在 and 元素中使用嵌套的 DIV 或 span。现在，50% 的宽度与填充或边距的需求相冲突。

这样的事情可以完成同样的事情。

  <dt><div style="margin:5px;">first name</div></dt>
  <dd><div style="margin:5px;"><input /></div></dd>

【讨论】：

【解决方案5】：

你能做的只有：

使用JavaScript获取DL的宽度，然后计算DT和DD的宽度，这样width加上margin和padding加起来就是DL的100%

或者为第一列设置固定宽度，第二列不设置宽度

或者将每个DT 和DD 的内容用DIV 包装起来，并给出margin 和padding

【讨论】：