代码：
<html>
<head>
<style type="text/css">
ul{
float:left;
width:100%;/*ul 元素的宽度是 100%*/
padding:0;
margin:0;
list-style-type:none;/*去除无序列表前面的小点*/
}
a{
float:left;
width:7em;/*列表中的每个超链接的宽度是 7em（当前字体尺寸的 7 倍）*/
text-decoration:none;/*没有文本装饰*/
color:white;
background-color:lightpink;/*光标未在鼠标上时，显示的颜色*/
padding:0.2em 0.6em;
border-right:1px solid white;/*添加颜色和边框，以使其更漂亮。*/
}
a:hover {background-color:gray;}/*光标在标签上时，显示另一种颜色*/
li{display:inline;}
/*把li标签变成行内元素，元素前后没有换行，这样就可以使列表排列成一行。*/
</style>
</head>
<body>
<ul>
<li><a href="#">Link one</a></li><!-- href="#"默认跳转到当前页面 -->
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
<p>
</p>
</body>
</html>
截图：
竖直菜单栏：
标签：em,换行,标签,li,color,Link,列表 来源： https://www.cnblogs.com/huaxiaoyou/p/15551734.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。