CSS和无序列表
觉得很有用的 CSS 技巧，无聊就翻译过来。中心思想就是，通过 CSS ，li 标签可以无比强大。以下是翻译后的内容。
我仍然记得我发现 li 标签这一天。这并不是说在此之前，我没用过——事实上我曾经大量使用无序列表。那一天我发现的是使用小小的 CSS，li 变得很好很强大，堪称网页设计的三个俯卧撑。我们甚至可以用 ul li 来创建整个网站的布局。当然，你不要太认真，不过可以试试。仅以此文向 li 致以崇高的敬意。
使用多个 li 标签创建水平导航
你可以在水平导航、横向名单中使用无序列表。基于表的 CSS 布局，深深地深深地震撼了我。它可以使你的代码更加风情万种，楚楚动人。下面是个有5个按钮的水平导航的例子。
ul{ margin: 0 auto; } ul.horizontal_list li{ text-align: left; float: left; list-style: none; padding: 3px 10px 3px 10px; margin: 5px; border: 1px solid #CCC; }
以上是 CSS ，HTML 如下：
<ul class="horizontal_list"> <li>Home</li> <li>About Us</li> <li>Contact Us</li> <li>News</li> <li>Mission</li> </ul>
效果如下：
- Home
- About Us
- Contact Us
- News
- Mission
多列显示
使用 li 可以很容易实现，告别 br 吧！而且日后方便维护。原理如下：
ul{ margin: 0 auto; } /* The wider the #list_wrapper is, the more columns will fit in it */ #list_wrapper{ width: 200px } /* The wider this li is, the fewer columns there will be */ ul.multiple_columns li{ text-align: left; float: left; list-style: none; height: 30px; width: 50px; }
以上是 CSS 。
<div id="list_wrapper"> <ul class="multiple_columns"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> <li>Seven</li> <li>Eight</li> <li>Nine</li> </ul> </div>
效果如下：
- One
- Two
- Three
- Four
- Five
- Six
- Seven
- Eight
- Nine
背景效果
厌倦了默认的黑点吧，可以使用超酷的背景来替换之。使用 CSS 的话，小菜一碟。
HTML 代码：
<ul class="cool_background"> <li>Home</li> <li>About Us</li> <li>Contact Us</li> <li>News</li> <li>Mission</li> </ul>
CSS 代码：
ul{ margin: 0 auto; } ul.cool_background li{ text-align: left; float: left; list-style: none; padding: 3px 10px 3px 25px; margin: 5px; background: url(cool_background.gif) 5px 5px no-repeat; }
别忘记把图片放到跟 CSS 文件相同目录里面。效果如下。
来源：http://mirificampress.com/permalink/the_amazing_li
作者：Matthew Griffin
。。。这和li没有太大关系吧
几乎任何标签都能做到这些
之所以li不会被普遍用来做全页面布局，不是因为它弱，而是因为它在各种浏览器的默认属性（行高啊边距啊等等等等）太不一样。从这一点说我更喜欢span