<!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