Question

我正在尝试水平对齐HTML定义列表，所以术语在左侧，定义在右侧。

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

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

你可以在我的jsFiddle中看到这个，其中定义“555”与术语“555”没有正确对齐。

http://jsfiddle.net/jmuheim/kjf8f/

如何解决这个问题的任何帮助都非常感谢。要求：

我希望定义使用右侧的所有可用水平空间，因此我不想对<dd>标记使用固定宽度。
我不希望任何情况下的定义都位于相应的术语下。

Answer 1

这可能会成功。添加以下CSS规则：

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

伪元素将清除浮动的<dd>元素，这将确保下一个<dt>在新行上开始。

请参阅演示：http://jsfiddle.net/audetwebdesign/TXYGk/

Answer 2

我真的很喜欢马克的回答。另一个解决方案，如果它没有破坏你的设计要求，也可能浮动DD，并给出DD和DT（和水平边距）百分比基于宽度而不是固定像素宽度：http://jsfiddle.net/dHRSz/1/ < / p>

或者考虑到，根据内容的不同，表格（包含在<th scope="row">中的条款）可能不太适合标记这一点。

编辑 - 从jsfiddle复制CSS：

body {
    padding: 0;
    margin: 0;
}

.block {
    overflow: hidden;
    margin: 20px 0;
}

dl {
    margin: 10px 0;
}

dt {
    margin: 0 0 4px 0;
    float: left;
    clear: left;
    width: 28%;
}

dd {
    float: left;
    width: 71%;
    margin: 0 0 4px 1%;
}

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

2 个答案: