使用 CSS 实现水平导航菜单
核心 CSS 样式
ul {
float: left;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
a {
float: left;
width: 7em;
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; /* 显示为行内元素,前后没有换行 */ }
HTML 结构
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
Link three
Link four


