Question

我有一个标题/值列表。我在想定义列表是要走的路。我希望标题和定义在同一行，我不希望标题具有相同的宽度，但是每个标题的宽度都取决于标题中的文本数量。我也希望定义保持在他们的块内，而不是在标题下流血。最后，我希望它能与IE7及更高版本配合使用。

好的，我提出了以下HTML / CSS，它几乎可以工作。我在http://jsfiddle.net/s45Kd/有一个实例，因为我无法弄清楚如何使用stackoverflow窗口添加CSS（是否可能？）。两个问题。

首先，如果定义中没有任何空格（即“电子邮件”），我如何强制定义中断？

第二，为什么长定义最终会在标题下出现（即“某些文字”）？

虽然我很感激“只是这样做”，但我更多的是为什么会这样，所以我更好理解。

谢谢

<style type="text/css">
    dl,dt,dd {padding:0;margin:0;}
    dl {width:200px;border:1px dashed black;}
    dt {float:left;font-weight:bolder; padding-right:5px; border:1px dashed red;}
    dd {border:1px dashed blue;}
</style> 
<dl>
    <dt>First Name:</dt><dd>Bob</dd>
    <dt>Last Name:</dt><dd>Johnson</dd>
    <dt>Email:</dt><dd>bob.johnson@stackoverflow.com</dd>
    <dt>Phone Number:</dt><dd>(555) 555-1212</dd>
    <dt>Some Text:</dt><dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
    <dt>Birthday</dt><dd>January 1st</dd>
</dl>

Answer 1

对于第一个，可以通过设置：

来解决自动换行

word-wrap: break-word;

对于第二个，关键是在overflow: hidden;和dt元素上设置dd，同时仍然只悬浮dt。

演示这个jsFiddle：http://jsfiddle.net/fLPej/108/

定义列表的CSS样式

1 个答案: