html - CSS 用于第一行的左右对齐，换行右对齐

Question

我正在设计一个酒吧的菜单，但无法完全让 CSS 执行我想要的操作。我希望饮料名称左对齐，描述右对齐，任何换行也右对齐。 (我们规定饮料名称永远不会超过一行。)

这是我目前所拥有的(也在 http://jsfiddle.net/H96XQ/ )

CSS:

.alignleft {
   font-weight: 700;
   text-transform: uppercase;
   float: left;
   text-align:left;
   text-align
}
.alignright {
   font-weight: 400;
   font-style: italic;
   float: right;
   text-align:right;
}

HTML:

<div id="textbox">
   <p class="alignleft">Old Fashioned</p>
   <p class="alignright">Bulleit Bourbon, Raw Sugar, Luxardo Maraschino Cherries, Soda, Orange</p>
   <div style="clear: both;"></div>
   <p class="alignright">Jameson Irish Whiskey, Coffee</p>
   <div style="clear: both;"></div>
</div>

Irish Coffee 系列看起来像我想要的。但是，如果合并的左文本和右文本对于一行来说太宽，它就不会按照我想要的方式换行 - 说明会单独占一行。

以下是我想要的，但这只是因为我连续使用了两个“alignright”实例并自己弄清楚换行发生的位置。因此，每次我们更改菜单时，我都必须逐行进行，然后……呃。

<div id="textbox">
   <p class="alignleft">Old Fashioned</p>
   <p class="alignright">Bulleit Bourbon, Raw Sugar,</p>
   <p class="alignright"> Luxardo Maraschino Cherries, Soda, Orange</p>
   <div style="clear: both;"></div>
   <p class="alignleft">Irish Coffee</p>
   <p class="alignright">Jameson Irish Whiskey, Coffee</p>
   <div style="clear: both;"></div>
</div>

任何帮助将不胜感激。

Answer 1

LIVE DEMO

HTML

<p>What I want:</p>
<div id="textbox">
        <h3>Old Fashioned</h3>
        <p >Bulleit Bourbon, Raw Sugar, Luxardo Maraschino Cherries, Soda, Orange</p>
        <h3>O'Henry</h3>
        <p>Buffalo Trace Bourbon, Benedictine, Liqueur, Fever Tree Ginger Beer</p>
        <h3>Hemingway</h3>
        <p>Aged White Rum, Fresh Lime &amp;
         Grapefruit Juice, Maraschino Liqueur, Lucardo Maraschino Cherries</p>
        <h3>Irish Coffee</h3>
        <p>Jameson Irish Whiskey, Coffee</p>
    </div>

CSS

* {
    margin: 0;
    padding: 0;
}
#textbox {
    width: 350px;
    margin: 10px auto;
    padding: 10px;
    border: 1px solid #cccccc;
}
#textbox h3 {
    font-family: 'Roboto Condensed', sans-serif;
    font-size:15px;
    font-weight: 700px;
    text-transform: uppercase;
    float: left;
    text-align:left;
}
#textbox p {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    font-style: italic;
    color: #333;
    text-align:right;
}