html - 如何让 dl dds 彼此对齐

Question

我有以下html：

<html>
<head>
<style type="text/css">
dt
{
clear:left;
float:left;
padding-right:50px;
}
</style>
</head>
<body>
<dl>
<dt>First Answer</dt>
<dd>Dog</dd>
<dt>Second Answer</dt>
<dd>Cat</dd>
</dl>
</body>
</html>

当你运行它时，狗和猫不排队。我真的很希望能把 Dog 和 Cat 的第一个字母排成一行。

有谁知道如何设计这个来实现这个？

而不是使用表。

score 2 · Accepted Answer

2

您可以在 dt 元素上设置固定宽度。

dt
{
clear:left;
float:left;
width:200px;
}

于 2012-08-27T00:01:24.383 回答

score 0 · Accepted Answer

这是您更新的 HTML/CSS

<style type="text/css">
dt{
    clear:left;
    float:left;
    padding-right:50px;
    width:200px;
}
</style>
<body>
    <dl>
       <dt>First Answer</dt>
       <dd>Dog</dd>
       <dt>Second Answer</dt>
       <dd>Cat</dd>
       </dl>
</body>

这是您更新的代码...

html - 如何让 dl dds 彼此对齐

2 回答 2

Related

Reference