Html 如何使dl dds相互对齐_Html_Css

Html 如何使dl dds相互对齐

html css

Html 如何使dl dds相互对齐,html,css,Html,Css,我有以下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 Answ

我有以下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>


dt
{
清除：左；
浮动：左；
右边填充：50px；
}
第一个答案
狗
第二个答案
猫

当你跑的时候，狗和猫不会排成一行。我真的希望狗和猫的第一个字母能排成一行

有人知道如何通过这种方式来实现这一点吗

不要使用表格。

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

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

这是您更新的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>


dt{
清除：左；
浮动：左；
右边填充：50px；
宽度：200px；
}
第一个答案
狗
第二个答案
猫

这是您的更新代码