用
制作导航栏问题

rrdawlx 2014-01-25 01:03:09

<!DOCTYPE html>

<html>

<head>

<style>

ul{

list-style-type:none;

margin:0;

padding:0;

}



li{

display:inline;

}



a{

font-weight:bold;

color:#FFFFFF;

background-color:#98bf21;

text-align:center;

text-decoration:none;

text-transform:uppercase;

}



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

</html>

就使用 <li>display:inline 这种方法制作导航栏，怎么去除掉各块间的间隔？

...全文

267 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

Qian_F 2014-01-26

打赏
举报

可以换个思路嘛！设置ul的背景色，取消a的背景色试试。

<!DOCTYPE html>

<html>

<head>

<style>

ul{

list-style-type:none;

margin:0;

padding:0;

background-color:#98bf21;

}



li{

display:inline;

}



a{

font-weight:bold;

color:#ffffff;

text-align:center;

text-decoration:none;

text-transform:uppercase;

}



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

</html>

蝶恋花雨 2014-01-26

打赏
举报

引用 5 楼 wlx1991 的回复:

如果这样的话，display:inline不用设置也行

是的你要连在一起的话。我是不改动你的代码的基础上加的。

rrdawlx 2014-01-25

打赏
举报

引用 2 楼 kongwei521 的回复:

li{ display:inline; float: left; 追加float :left }

如果这样的话，display:inline不用设置也行

wkx0625 2014-01-25

打赏
举报


*{margin:0; padding:0; }
li{
margin:0; padding:0; 
}

是不是没有去行内外间距。

zhjdg 2014-01-25

打赏
举报

原来是空格造成的。搜 display:inline 有间距有兴趣总结一下，我目前还不想认真研究这个。这样就没有了

<ul id='nav'>
		<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>

蝶恋花雨 2014-01-25