Html 餐厅菜单

我想创建一个餐厅风格的菜单，菜单项左对齐，价格右对齐。 我已经发布了我的HTML和CSS。有人能帮我如何做到这一点吗

HTML格式如下： 沙拉4.50英镑
（配山羊奶酪）

---

这是一把小提琴

基本上，

dt

有两个元素（class

title

和

price

），它们都

float

.rm-content dl{
    margin: 0;
}

.rm-content dl dt,
.rm-content dl dd{
    display: block;
    margin: 0;
}

.rm-content dl dt {
    font-weight: 400;
    text-transform: uppercase;
    color: #C99944;
    clear:both;
}

.rm-content dl dt div.title{
    float:left
}

.rm-content dl dt div.price{
    float:right;
}

.rm-content dl dd {
    clear:both;
    font-size: 13px;
    padding: 0 5px 15px;
    line-height: 12px;
    color: #C99944;
}

示例Html

<div class="rm-content">
    <dl>
        <dt>
            <div class="title">
            Risotto 
            </div>
            <div class="price">
            £5
            </div>
        </dt>
        <dd>with celery and parmesan</dd>
    </dl>

</div>

意大利调味饭
£5
配芹菜和帕尔玛干酪

更简单

CSS

.rm-content {
    font-weight: 400;
    text-transform: uppercase;
    color: #C99944;
}
.rm-content i {
    display:block;
    text-transform: none;
    font-size: 13px;
    padding: 0 5px 15px;
    line-height: 12px;
    font-style:normal;
}
.rm-content em{
    float:right;
    font-style:normal;
}

HTML

<div class="rm-content">
    Risotto <em>£5</em> <i>with celery and parmesan</i>
    Salad <em>£4.50</em> <i>with celery and parmesan</i>
</div>

意大利饭5英镑，配芹菜和帕尔玛干酪
沙拉4.50英镑，配芹菜和帕尔玛干酪

.rm-content {
    font-weight: 400;
    text-transform: uppercase;
    color: #C99944;
}
.rm-content i {
    display:block;
    text-transform: none;
    font-size: 13px;
    padding: 0 5px 15px;
    line-height: 12px;
    font-style:normal;
}
.rm-content em{
    float:right;
    font-style:normal;
}

<div class="rm-content">
    Risotto <em>£5</em> <i>with celery and parmesan</i>
    Salad <em>£4.50</em> <i>with celery and parmesan</i>
</div>