1

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

术语和定义都可以很长，因此它们可以比可用宽度更宽并且会换行。

使用我的 CSS，我对 wrap 的定义没有任何问题，因此高于相应的术语。但是在极少数情况下，当术语包含并高于相应的定义时，我无法正确清除以下定义。

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

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

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

  • 我希望定义使用右侧的所有可用水平空间，所以我不想为<dd>标签使用固定宽度。
  • 我不希望在任何情况下都将定义定位在相应的术语下。
4

2 回答 2

6

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

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

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

见演示：http: //jsfiddle.net/audetwebdesign/TXYGk/

于 2013-10-02T13:57:22.047 回答
2

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

或者考虑一下，根据内容，一个表格（带有包含在 中的术语<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%;
}
于 2013-10-02T14:05:02.347 回答