CSS 创建水平菜单

来源：互联网发布：搜狗微信 php 爬虫编辑：程序博客网时间：2024/06/05 07:22

使用具有一栏超链接的浮动来创建水平菜单。

<html><head><style type="text/css">ul{float:left;width:100%;padding:0;margin:0;list-style-type:none;}a{float:left;width:5em;text-decoration:none;color:white;background-color:purple;padding:0.2em 0.6em;border-right:1px solid white;}a:hover {background-color:#ff3300}li {display:inline}</style></head><body><ul><li><a href="http://www.sina.com.cn/" target="_blank">新浪</a></li><li><a href="http://www.sina.com.cn/" target="_blank">新浪</a></li><li><a href="http://www.sina.com.cn/" target="_blank">新浪</a></li><li><a href="http://www.sina.com.cn/" target="_blank">新浪</a></li></ul><p>在上面的例子中，我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素（元素前后没有换行）。这样就可以使列表排列成一行。ul 元素的宽度是 100%，列表中的每个超链接的宽度是 5em（当前字体尺寸的 5 倍）。我们添加了颜色和边框，以使其更漂亮。</p></body></html>

阅读全文

0 0