css html制作网页，用ul和li制作横向导航栏 网页制作之怎样使用css样式控制ul生成导航栏
\u5982\u4f55\u5e94\u7528ul\u3001li\u6807\u7b7e\u521b\u5efacss\u6a2a\u5411\u5bfc\u822a\u83dc\u5355\uff1fxhtml\u4ee3\u7801\u9996\u5148\u5b9a\u4e49\u4e86\u4e00\u4e2a\u5bb9\u5668div id="nav"\u3002\u8fd9\u4e2a\u5bb9\u5668\u7528\u6765\u653e\u7f6e\u8fd9\u4e2a\u65e0\u5e8f\u5217\u8868\u6a2a\u5411\u5bfc\u822a\u83dc\u5355\u7684\u5185\u5bb9\uff0c\u4f46\u4e5f\u6709\u4eba\u8ba4\u4e3a\u8fd9\u4e2a\u5bb9\u5668\u662f\u591a\u4f59\u7684\uff0c\u76f4\u63a5\u5b9a\u4e49ul id="nav"\u5c31\u53ef\u4ee5\u4e86\u3002\u6211\u4eec\u4e0d\u5efa\u8bae\u4f60\u8fd9\u6837\u505a\uff0c\u8981\u77e5\u9053\u6211\u4eec\u7684\u7ad9\u70b9\u662f\u53ef\u6269\u5c55\u7684\uff0c\u6211\u4eec\u8981\u4e3a\u5c06\u6765\u7684\u6269\u5c55\u7559\u6709\u8db3\u591f\u7684\u4f59\u5730\uff0c\u5047\u5982\u6211\u4eec\u7684\u5bfc\u822a\u6837\u5f0f\u8bbe\u8ba1\u7684\u66f4\u52a0\u590d\u6742\uff0c\u4ec5\u6709\u7684ul\u662f\u4e0d\u80fd\u6ee1\u8db3\u9700\u8981\u7684\u3002\u6211\u4eec\u5b9a\u4e49\u8fd9\u6837\u7684\u5bb9\u5668\u4e5f\u66f4\u7b26\u5408\u6211\u4eec\u7f16\u5199\u4ee3\u7801\u7684\u4e60\u60ef\u3002#nav\u5b9a\u4e49\u4e86\u7a97\u53e3\u7684\u5bbd\u9ad8\u53ca\u80cc\u666f\u989c\u8272\u3002#nav ul\u5305\u542b\u6709margin\u548cpadding\u58f0\u660e\uff0c\u5b57\u4f53\u53ca\u989c\u8272\u58f0\u660e\u3002line-height: 30px;\u662f\u975e\u5e38\u91cd\u8981\u7684\u5b9a\u4e49\uff0c\u5047\u5982\u53d6\u6d88\u6389\u884c\u9ad8\u7684\u5b9a\u4e49\uff0c\u6211\u4eec\u7684\u94fe\u63a5\u6587\u5b57\u5782\u76f4\u5c45\u4e2d\u5c31\u53ef\u80fd\u53d7\u5230\u5f71\u54cd\u3002white-space: nowrap;\u6216\u8bb8\u5927\u5bb6\u5e76\u4e0d\u80fd\u7406\u89e3\u6709\u4ec0\u4e48\u4f5c\u7528\uff0c\u5b83\u5b9a\u4e49\u4e86\u5f3a\u5236\u5728\u540c\u4e00\u884c\u5185\u663e\u793a\u6240\u6709\u6587\u672c\uff0c\u76f4\u5230\u6587\u672c\u7ed3\u675f\u6216\u8005\u906d\u9047br\u5bf9\u8c61\u3002 #nav li\u4e2d\u7684list-style-type: none;\u53bb\u9664\u4e86\u5217\u8868\u9879\u6240\u4f7f\u7528\u7684\u9884\u8bbe\u6807\u8bb0\u3002\u4f7f\u5176\u66f4\u8c61\u662f\u7eaf\u6587\u672c\uff0c\u800c\u6ca1\u6709\u5217\u8868\u6807\u8bb0\u3002display: inline;\u58f0\u660e\u5219\u80fd\u591f\u8ba9\u5217\u8868\u9879\u76ee\u5728\u9875\u9762\u4e0a\u4ece\u5de6\u5411\u53f3\u6d6e\u52a8\uff0c\u800c\u4e0d\u4f1a\u8ba9\u6bcf\u4e2a\u9879\u76ee\u663e\u793a\u5728\u5355\u72ec\u7684\u884c\u91cc\u800c\u4ece\u4e0a\u81f3\u4e0b\u7684\u6392\u5217\u3002\u8fd9\u4e24\u9879\u58f0\u660e\u662f\u6211\u4eec\u5b9e\u73b0\u65e0\u5e8f\u5217\u8868\u6a2a\u5411\u5bfc\u822a\u83dc\u5355\u7684\u8981\u5bb3\u3002#nav li a\u548c#nav li a:hover\u5b9a\u4e49\u4e86\u94fe\u63a5\u7684\u6837\u5f0f\u3002\u5176\u4e2d\u7684\u5185\u5bb9\u5c31\u4e0d\u4f5c\u6df1\u5165\u4e86\uff0c\u552f\u4e00\u8981\u8bb2\u7684\u5c31\u662f\uff1apadding: 7px 10px;\u5b83\u662f\u7528\u6765\u63a7\u5236\u94fe\u63a5\u6587\u5b57\u4e4b\u95f4\u7684\u7a7a\u767d\u95f4\u9694\u7684\uff0c\u4f60\u53ef\u4ee5\u8bd5\u7740\u6539\u53d8\u6570\u503c\u8bd5\u8bd5\u770b\u3002
ul li{ list-style:none; float:left; margin-left:8px; } \u9996\u9875 \u6848\u4f8b\u5c55\u793a \u516c\u53f8\u65b0\u95fb \u8054\u7cfb\u6211\u4eec \u52a0\u5165\u6211\u4eec \u8fd9\u4e2a\u4e5f\u8fd8\u662f\u6bd4\u8f83\u7b80\u5355\u7684\u4e86\uff0c\u4f60\u53ef\u4ee5\u770b\u4e0bphp\u4e2d\u6587\u7f51\u7684\u8d44\u6599\uff0c\u4e0a\u9762\u6709\u8bb2\u7684\uff0c\u4e0a\u9762\u6709\u6bb5\u4ee3\u7801\u4f60\u53ef\u4ee5\u590d\u5236\u4e0b\u6765\u8fd0\u884c\u770b\u4e00\u4e0b\uff0c\u662f\u4e0d\u662f\u4f60\u60f3\u8981\u7684\u6548\u679c\uff0c\u5e0c\u671b\u5bf9\u4f60\u6709\u5e2e\u52a9\uff01
将ul里面的li标签都设置为右浮动即可。如：
<ul style="overflow:hidden; display:block">
<li class="float:right; padding:10px;>项目1</li>
<li class="float:right; padding:10px;>项目1</li>
<li class="float:right; padding:10px;>项目1</li>
<li class="float:right; padding:10px;>项目1</li>
</ul>
设置右浮动就行
扩展阅读：htmlcss网页设计成品 ... 免费css网站 ... html网页制作个人网站 ... mac蜜桃奶茶314 ... 免费学生网页制作成品 ... css怎么嵌入到html ... 学生个人网页制作html ... www.sony.com.cn ... htmlcssjs制作简单网页 ...
