DL像一张桌子

我在300px宽的容器中有以下DL。DL像一张桌子

<style type="text/css"> 
dl {width: 300px} 
dt { 
    float:left; 
    clear: left; 
    width: 70px; 
} 
</style> 
<dl> 
    <dt>Row1</dt> 
    <dd>Value1</dd> 
    <dt>Row2</dt> 
    <dd>Value2</dd> 
    <dt>Row3 with longer title requiring line breaks</dt> 
    <dd>Value 3</dd> 
    <dt>Row4</dt> 
    <dd>Value4</dd> 
    <dt>Row5</dt> 
    <dd>Value5.1</dd> 
    <dd>Value5.2</dd> 
    <dt>Row6</dt> 
    <dd>Value6.1</dd> 
    <dd>Value6.1</dd> 
    <dd>Value6.1</dd> 
</dl>

我该如何调整的项目，看起来像一个表，即：

已经在左栏DT和DD S IN右栏
一行x和valueX顶端对齐
多DD s（对于一个DT）彼此

下面列出

我找到了多个相关问题here，here和here，但既没有我设法顶部对齐的不同情况（DT比DD较高，多DD S是不是DT更高）。

来源

2013-04-01 Peter Albert

你的意思是这样吗？ http://jsfiddle.net/8VKng/ –

@ExplosionPills：几乎 - 只需要多个“DD”在彼此之下，而不是彼此相邻... –

如果您使用'width：auto; 'dt's唯一的问题是长标题的... – DarkAjax

我认为这个解决方案将符合你想要的一些小调整。基本上，你还需要漂浮所有的dd，但你需要清除它们，以便它们垂直堆叠。但是，由于您需要将dt浮动到左侧，因此无法清除第一个。 +（下一个兄弟）选择器对此很方便，因为您可以覆盖dt后面的第一个dd上的clear规则。您可能还需要更新其他dd的余量。

dl {width: 300px} 
dt { 
    float:left; 
    clear: left; 
    width: 70px; 
} 
dd { 
    clear: left; 
    float: left; 
    margin-left: 70px; 
} 
dt + dd { 
    float: left; 
    clear: none; 
    margin-left: 0; 
}

http://jsfiddle.net/8VKng/2/

来源

2013-04-01 22:16:13

这很好，谢谢！ –

只是试图在真实网站中实现它，但又被卡住了。如果'DT'有换行符，则下一个'DD'未对齐 - 请参阅http://jsfiddle.net/8VKng/10/中的红色DD。谢谢你的帮助！ –

@PeterAlbert不幸的是，我不认为纯粹的CSS解决方案可能完全符合*你想要的东西，因为有些测量结果不能提前知道，但这与我所能得到的一样接近：http：// jsfiddle .net/8VKng/11/- 使用'float：right'是因为否则左边可能会有额外的余量;如果这样做不好，你还需要在'dd'上设置一个宽度+'text-align：left'：http://jsfiddle.net/8VKng/12/ –

我会使用Bootstrap来为你处理DL。

Bootstrap Description List

他们有两个选择，你也可以定制自己设置为自己的喜好。只是一个建议。

.dl-horizontal:before, 
.dl-horizontal:after { 
    display: table; 
    content: ""; 
    line-height: 0; 
} 
.dl-horizontal dt { 
    float: left; 
    width: 160px; 
    clear: left; 
    text-align: left; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 
.dl-horizontal dd { 
    margin-left: 180px; 
}

http://jsfiddle.net/rzWnG/1/

这是什么引导使用，使水平DL。我简化了一下，看看你想要什么。我从他的JSfiddle中使用了Explosion Pills html。为此，我会给他一个upvote。

试试这个。这将有助于更准确地确定你想要的东西。

来源

2013-04-01 22:06:23 ralliart2004

不幸的是，我不能使用Bootstrap .-( –

@PeterAlbert我感觉对你来说，你是不是想让它与我链接的bootstrap文档中的水平解析列表类似？我可以检查bs核心，看看它们是如何设计的 – ralliart2004

谢谢 - 这个解决方案的工作原理!!! +1。刚刚接受ExplosivePills答案，因为它稍微快一点！非常感谢你的努力！ –

回答

相关问题