<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>菜单制作和浮动</title>
<style>
a{
text-decoration: none;
}
li{
list-style-type: none;
/*display: inline-block;*/
float: left;
margin-right:40px;
}
li span{
margin-left: 54px;
}
ul{
height: 30px;
line-height: 20px;
}
.clearfloat{
clear: both;
}
</style>
</head>
<body>
<ul>
<li>
<a herf="#">菜单1</a>
<span>|</span>
</li>
<li>
<a herf="#">菜单2</a>
<span>|</span>
</li><li>
<a herf="#">菜单3</a>
<span>|</span>
</li><li>
<a herf="#">菜单4</a>
<span>|</span>
</li>
<!--清除浮动,若未清除浮动,div中的内容会跟随在菜单列表的后面-->
<div class="clearfloat"></div>
<div>5843964</div>
</ul>
</body>
</html>
html5菜单制作和浮动
最新推荐文章于 2022-06-01 22:09:36 发布