<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p><b>注释：</b>如果没有规定 !DOCTYPE，则浮动项目会产生意想不到的结果。</p>
<p>为了显示出链接区域，我们为链接添加了背景色。</p>
<p><b>注释：</b>向 ul 元素添加 overflow:hidden，是为了防止 li 元素出现在列表之外。</p>
</html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p><b>注释：</b>如果没有规定 !DOCTYPE，则浮动项目会产生意想不到的结果。</p>
<p>为了显示出链接区域，我们为链接添加了背景色。</p>
<p><b>注释：</b>向 ul 元素添加 overflow:hidden，是为了防止 li 元素出现在列表之外。</p>
<p><b>注释：</b>使用#是为了模拟url，这里属于测试<>br
list-style-type：none:删除列表中的圆点<br>
margin:0和padding:0f分别是为了消除内边距和外边距<br>
display:block :把链接显示为块元素可使整个链接区域可点击（不仅仅是文本)</p>
</body></html>
扫一扫
1262
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
