CSS设置定义列表的样式<；dl>；

我正在尝试CSS样式一些HTML看起来像下图。我决定使用一个定义列表和一些类来实现这一点

我正在努力

移动价格以立即跟随dt标签，并

删除默认的

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>

经典意大利豪吉
$8
辣味香肠、沙利米、卡皮科拉、香蕉辣椒、罗曼尼、西红柿、普罗沃龙、自制橄榄油和香草调味汁，放在胡吉面包上

要回答问题的第一部分，将

dt

和

.price

浮动到左侧将使它们相邻排列

然后，您可以将另一个

dd

标记设置为

clear:left

，从而解决您的问题

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

dd{
    clear:left;
}

---

至于你的第二个问题，我没有看到任何默认样式会导致

dd

上出现空白。它看起来符合我的要求，但如果不是，您可以始终在左边留出

边距：0在
dd
上
 到目前为止，您尝试了什么CSS？对于这种类型的CSS，定义列表不是一个好的选择styling@sandeep我想没关系。你建议用什么替代？很多乱七八糟的
li
s和类？@JamWaffles；用较少的css类和适当的标记检查我的示例