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

我想水平对齐一个HTML定义列表，所以这个词在左边，而定义在右边。如何水平对齐HTML定义列表（<dl>）而不限制高度的术语或定义？

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

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

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

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

关于如何解决此问题的任何帮助真的赞赏。要求：

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

来源

2013-10-02 Joshua Muheim

既然你真的想以表格方式显示定义的表格，改变'dl'到'table'标记是最好的选择，如果你有控制超过标记。不幸的是，由于缺乏内部结构，显然没有办法将'dl'作为CSS中的表格。 –

这可能会诀窍。添加下面的CSS规则：

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

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

观看演示：http://jsfiddle.net/audetwebdesign/TXYGk/

来源

2013-10-02 13:57:22

这是关于完美的，谢谢！我只需要从dt中删除边距。现在它是我想要的100％的方式。 http://jsfiddle.net/jmuheim/TXYGk/2/ –

我真的很喜欢马克的回答。另一种解决方案，如果它不破坏您的设计要求，可能还会使DD浮起来，并且给出DD和DT（以及水平边距）基于百分比的宽度而不是固定像素宽度：http://jsfiddle.net/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-02 14:05:02 RwwL

我知道使用百分比的可能性，但通常他们不是我的要求所说的。是的，标题和内容字段之间的关系为1：1的表格可以，但我想定义列表更适合使用。不管怎么说，还是要谢谢你！ –

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

回答

相关问题