Question

我正在设计一个酒吧的菜单，并不能完全让CSS做我想要的。我希望饮料名称保持对齐，描述要正确对齐，任何包裹的线条也要对齐。（我们规定饮品名称永远不会超过一行。）

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>

爱尔兰咖啡系看起来像我想要的。但是如果组合的左右文本对于一行来说太宽，它就不会以我想要的方式包装 - 描述会得到它自己的一行。

以下是我想要的，但仅仅是因为我连续使用两个“对齐”实例并找出自己在哪里进行包装。因此，每次我们更改菜单时，我都必须逐行进行，并且......呃。

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

Answer 2

只需为alignleft和alignright classes添加display:inline; Fiddle

CSS用于第一行的左右对齐，包装线右对齐

2 个答案: