CSS样式化定义列表<dl> </dl>

Question

我正在尝试CSS样式的某些HTML看起来像下面的图像。我决定使用定义列表和一些类来完成这个。

我正在尝试

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上的边距。它看起来对我来说是必要的，但如果不是，你可以随时在margin-left:0;上加dd。