如果你看看大多数餐厅的菜单（或食谱） ，您会看到菜单表左边是食谱名右边是食谱价格，然后中间由虚线连接着。
<style type="text/css" media="screen" >
/* author 爱左看右 */
/* date 2008/05/08 */
/* site www.msleft.com */
body { font:75%/1.6em "Arial","宋体",Verdana,sans-serif; text-align:center; color:#000;}
* { margin:0; padding:0; }
ul,ol,dl {list-style:none;}
ul,ol,dl {list-style:none;}
a:link { color:#369; }
a:hover { color:#fc0; }
#menuprices {width:500px; margin:0 auto; background:#4c7300; padding:10px 0 30px;}
#menuprices h2 {font-size:1.2em; font-family: Georgia, "Times New Roman", Times, serif; color:#fff; text-align:center; padding:.5em 0;}
#menu {text-align:left; width:400px; border:1px solid #000; margin:0 auto; position:relative; padding:20px; background:#eff2df; overflow:hidden; }
#menu li {clear:both; float:left; width:100%; border-bottom:1px dashed #f59; line-height:1.4em; margin-top:-1em; }
#menu span {position:relative; top:2em; background:#eff2df; padding-right:4px; }
#menu em {font-style:normal; position:relative; top:0.7em; right:0; float:right; padding-left:10px; background:#eff2df; display:block; width:40px; }
#menu p {margin-right:3em; }
</style>
<div id="menuprices">
<h2>食谱价格表 Menu Prices</h2>
<ul id="menu">
<li><p><span>菜谱价格表</span></p><em>¥ 0</em></li>
<li><p><span>双皮奶</span></p><em>¥ 5</em></li>
<li><p><span>红烧鱼头</span></p><em>¥ 15</em></li>
<li><p><span>一品豆腐</span></p><em>¥ 8</em></li>
<li><p><span>东坡肉</span></p><em>¥ 12</em></li>
<li><p><span>酸辣汤</span></p><em>¥ 10</em></li>
<li><p><span>砂锅鱿鱼</span></p><em>¥ 12</em></li>
<li><p><span>养血止血-花生衣</span></p><em>¥ 7</em></li>
<li><p><span>羊肉冬瓜汤做法(东北菜)</span></p><em>¥ 26</em></li>
<li><p><span>1.几种丝瓜肉片汤的做法2.几种丝瓜肉片汤的做法3.几种丝瓜肉片汤的做法4.几种丝瓜肉片汤的做法
5.红烧肉的制作方法</span></p><em>¥ 35</em></li>
<li><p><span>蕃茄排骨汤</span></p><em>¥ 26</em></li>
<li><p><span>冬瓜煲汤</span></p><em>¥ 25</em></li>
<li><p><span>山药排骨汤</span></p><em>¥ 33</em></li>
</ul>
</div>