餐厅菜单

Question

我想创建一个餐厅风格的菜单，菜单项左对齐且价格右对齐。 我发布了我的HTML和CSS。有人可以帮助我如何实现这个目标吗？

HTML如下：          

沙拉£4.50

    

（与山羊奶酪）

<dt>Risotto £5</dt>
<dd>with celery and parmesan</dd>
</dl>

CSS如下：

.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;
}

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

Thank You

Answer 1

这是一个小提琴，它会做到这一点。

http://jsfiddle.net/zajgvty3/1/

dt基本上有两个元素（类title＆amp; 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>

Answer 2

更简单http://jsfiddle.net/5ms9h0zp/

<强> 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>