为水平导航栏使用浮动条

最编程 2024-03-24 18:10:00

...

摘要：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS中的浮动</title> <style type="text/css"> ul li{

<!DOCTYPE html>

<html>

<head>

<title>CSS中的浮动</title>

ul li{

list-style: none;

width: 100px;

height: 48px;

line-height: 40px;

text-align: center;

background: #ccc;

margin: 1px;

float: left;

}

.l{

width: 300px;

height: 300px;

background: red;

float: right;

}

.clear{clear: both;}

</style>

</head>

<body>

<ul>

<li>javascript</li>

<li>jquery</li>

</ul>

</body>

</html>

批改老师：天蓬老师批改时间：2019-04-01 09:47:52
老师总结：float可以改变块元素的显示特征, 例如本例中的<li>, 一旦浮动后, 就会沿着水平方向排列,因为脱离了文档流