CSS 样式定义列表

Question

我正在尝试为一些 HTML 设置 CSS 样式，使其看起来像下图。我决定使用带有一些类的定义列表来执行此操作。

我正在努力

1. 将价格移动到紧跟在 dt 标签之后
2. 删除默认的 dd 样式，使其一直位于左侧。

这是我的 HTML:

<dl>
    <dt>Classic Italian Hoagie</dt>
    <dd class="price">$8</dd>
    <dd class="desc">Pepperoni, salimi, capicola, banana peppers, romaine, tomatoes, provolone & housemade olive oil & herb vinaigrette on a hoagie bun</dd>
</dl>

Answer 1

要回答问题的第一部分，将 dt 和 .price 向左浮动将使它们并排排列。

然后，您可以将其他 dd 标记设置为 clear:left，从而解决您的问题。

dt, .price{
    float:left;
    clear:none;
    margin-right:5px;
}

dd{
    clear:left;
}

Working example

关于你的第二个问题，我没有看到任何默认样式导致 dd 上的边距。它看起来符合我的要求，但如果不是，您可以随时在 dd 上放置一个 margin-left:0;。