<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;
padding: 0}
/* p{
margin: 0;
float: left;
}*/
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
background-color: red;
}
a
{
float:left;/*不加float a就是一個內聯元素，加了float 就可以設置寬度了*/
width:7em;
/* display: block;*/
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;
/*float: left;*/
}
</style>
</head>
<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
<div>在上面的例子中在上面的例子中在上面的例子中在上面的例子中</div>
<p>
在上面的例子中，我們把 ul 元素和 a 元素浮向左浮動。li 元素顯示爲行內元素（元素前後沒有換行）。這樣就可以使列表排列成一行。ul 元素的寬度是 100%，列表中的每個超鏈接的寬度是 7em（當前字體尺寸的 7 倍）。我們添加了顏色和邊框，以使其更漂亮。
</p>
</body>
</html><a>inline元素 ，對於float:left的作用就是變成inline-block 目的是可以設置寬度等，因爲inline元素不能設置寬度
對於li可以不用float :left了 ，因爲本身display :inline 內聯元素就是一行中一個挨一個佈局的（float:left和display:inline的作用一樣的。取其一即可）
對於父元素ul, 如果沒有設置float:left，相當於一個空的塊元素在頁面上，
必須加上float:left
才佔滿DIV