如何水平对齐HTML定义列表（<；dl>；），而不限制术语或定义的高度？

我试图将HTML定义列表水平对齐，因此术语在左侧，定义在右侧

术语和定义都可以很长，因此它们可以比可用宽度更宽，并将包裹

对于我的CSS，我对包装的定义没有问题，因此高于相应的术语。但在极少数情况下，当术语包装且高于相应的定义时，我无法正确清除以下定义

您可以在我的JSFIDLE中看到这一点，其中的定义“555”与术语“555”没有正确对齐

非常感谢您对如何解决此问题的任何帮助。要求：

• 我希望定义使用右侧所有可用的水平空间，因此我不希望为
  标记使用固定宽度
• 我不想在任何情况下把定义放在相应的术语下

---

这可能会奏效。添加以下CSS规则：

dd:after {
    content: '';
    display: block;
    clear: both;
}

伪元素将清除浮动的
元素，这将确保下一个
从新行开始

---

请参见演示：
这可能会达到目的。添加以下CSS规则：

dd:after {
    content: '';
    display: block;
    clear: both;
}

伪元素将清除浮动的
元素，这将确保下一个
从新行开始

---

见演示：
我非常喜欢马克的答案。如果不破坏您的设计要求，另一种解决方案可能是浮动DDs，并提供DDs和DTs（以及水平边距）基于百分比的宽度，而不是固定的像素宽度：

或考虑到，根据内容，表（包含在<代码> <代码>中的术语）可能不太合适，无法标记此。

编辑-从JSFIDLE复制的CSS：

正文{
填充：0；
保证金：0；
}
.街区{
溢出：隐藏；
利润率：20px0；
}
dl{
利润率：10px0；
}
dt{
利润率：0.4px 0；
浮动：左；
清除：左；
宽度：28%；
}
dd{
浮动：左；
宽度：71%；
利润率：0.04×1%；
}

我很喜欢马克的答案。如果不破坏您的设计要求，另一种解决方案可能是浮动DDs，并提供DDs和DTs（以及水平边距）基于百分比的宽度，而不是固定的像素宽度：

或考虑到，根据内容，表（包含在<代码> <代码>中的术语）可能不太合适，无法标记此。

编辑-从JSFIDLE复制的CSS：

正文{
填充：0；
保证金：0；
}
.街区{
溢出：隐藏；
利润率：20px0；
}
dl{
利润率：10px0；
}
dt{
利润率：0.4px 0；
浮动：左；
清除：左；
宽度：28%；
}
dd{
浮动：左；
宽度：71%；
利润率：0.04×1%；
}

由于您确实希望以表格方式显示定义表，如果您可以控制标记，那么将

dl

更改为

table

标记是最佳选择。不幸的是，由于缺少内部结构，显然无法将

dl

设置为CSS中的表。由于您确实希望以表格方式显示定义表，如果您可以控制标记，将

dl

更改为

table

标记是最佳选择。不幸的是，由于缺少内部结构，显然无法将

dl

样式化为CSS中的表。这非常完美，谢谢！我还必须去掉dt的边距。现在它是100%的方式，我希望它是。这差不多完美了，谢谢！我还必须去掉dt的边距。现在它是100%的方式，我希望它是。我知道使用百分比的可能性，但它们往往不是我的要求所说的。是的，标题和内容字段之间有1:1关系的表是可以的，但我想定义列表更适合使用。无论如何谢谢你！我知道使用百分比的可能性，但它们往往不是我的要求所说的。是的，标题和内容字段之间有1:1关系的表是可以的，但我想定义列表更适合使用。无论如何谢谢你！