如何使< dl>水平布局？ [英] How to make <dl> layout horizontally?

问题描述

我想为我的网站开发一个布局，其中定义列表的元素将被水平布局，类似这样：

I'm trying to develop a layout for my website in which elements of a definition list will be laid out horizontally, kind of like this:

term 1                term 2               term 3
definition 1          definition 2         definition 3

任何人都知道一种方法使定义列表看起来像这样使用有效的CSS？或者如果我不能用< dl> 来做，推荐的结构是什么？

Anyone know a way to make a definition list look like this using valid CSS? Or if I can't do it with a <dl>, what would be the recommended structure?

推荐答案

这应该可以：

<dl>
    <dt>term 1</dt>
    <dd>definition 1</dd>
</dl>
<dl>
    <dt>term 2</dt>
    <dd>definition 2</dd>
</dl>
<dl>
    <dt>term 3</dt>
    <dd>definition 3</dd>
</dl>

在CSS中：

dl {
    float: left;
}

dl dd {
    display: block;
    margin: 0;
}

根据需要应用其他样式。可在此处找到一个工作示例：

Apply other styling as necessary. A working example can be found here:

http://www.ulmanen.fi/stuff/dl.php

这篇关于如何使< dl>水平布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！