<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body
{
background-color:white;
color:black;
border:2px solid red;
float:left;
}
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
width:7em;
color:white;
background-color:black;
padding:0.2em 0.6em;
border-right:1px solid white;
text-align:center;
float:left;
}
a:hover {background-color:gray;}
li {display:inline}
</style>
</head>
<body>
<base target="_blank">
<ul>
<li><a href="https://www.baidu.com">Baidu</a></li>
<li><a href="https://www.taobao.com/">TaoBao</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/">MDN</a></li>
<li><a href="http://www.bootcss.com/">Bootstrap</a></li>
</ul>
</body>
</html>
对
设置float的效果：
不设置的效果：
