应该是这样的: img http://gyazo.com/0ad52be5832d281682573c506096ae60.png
我的尝试
<div class="header">
<div class="container">
<img id="logo" src="img/logo.png"/>
<ul class="menu">
<a href="#"><li class="current">Home</li></a>
<a href="#"><li>Forums</li></a>
<a href="#"><li>Donate</li></a>
<a href="#"><li>Vote</li></a>
<a href="#"><li>Info</li></a>
</ul>
</div>
</div>
我使用Current类作为当前页面背景。
添加了标题
.header {
width: 100%;
height: 86px;
background-image: url("../img/gradient.png");
background-repeat: repeat-x;
border-bottom: solid 1px #a2a2a2;
}
向右浮动菜单,使其显示内嵌并居中文本
.menu {
float: right;
padding: 2.7%;
}
.menu a{
color: #1e1e1e;
}
.menu a:hover{
color: #5e5e5e;
}
.menu li {
display: inline;
float: left;
margin-left: 10px;
padding-left: 20px;
padding-top: 5px;
}
现在是当前背景的一部分
.current {
background-image: url("../img/hoverdiamond.png");
background-repeat: no-repeat;
width: 78px;
height: 36px;
padding-left: 20px;
padding-top: 5px;
color: white;
}
结果:
img2 http://gyazo.com/f3d859b9a5868de3d58c07b71eb3d1d6.png
你能看到当前和其他物品之间有很大的空间吗?我该如何删除?使它等于其他空间。
我尝试的事情:
添加位置相对
结果: 菜单项“当前”遍历菜单项“论坛”
我找不到任何其他方法,我做错了什么?
答案 0 :(得分:0)
删除width
上的.current
。这就是增加额外间距的原因。
如果您不想更改它,请更改相邻li上的间距:
.current + li {
padding-left: 0;
}
以下是您要完成的简化演示。从中学习:
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Donate</a></li>
<li><a href="#">Vote</a></li>
<li><a href="#">Info</a></li>
</ul>
ul {
float: right;
}
li {
display: inline;
padding: 10px;
}
.current {
background-image: url('http://placekitten.com/200/200');
}
答案 1 :(得分:0)
尝试以下HTML:
<div class="header">
<div class="container">
<img id="logo" src="img/logo.png"/>
<ul class="menu">
<li class="current"><a href="#">Home</li></a>
<li><a href="#">Forums</a></li>
<li><a href="#">Donate</a></li>
<li><a href="#">Vote</a></li>
<li><a href="#">Info</a></li>
</ul>
</div>
</div>
通过以下对CSS的修正:
.menu {
float: right;
padding: 2.7%;
}
.menu li {
float: left;
margin-left: 10px;
}
.menu a{
color: #1e1e1e;
display: block;
padding-left: 20px;
padding-top: 5px;
}
.menu a:hover{
color: #5e5e5e;
}
.current {
background-image: url("../img/hoverdiamond.png");
background-repeat: no-repeat;
color: white;
}
您的HTML结构不正确......您不应将<li>
元素放在锚元素中。
您也不需要在列表项上添加display: inline;
,因为它们仍然是左侧浮动的,它们应该已经内联。
将来,您可能希望使用W3C validator检查HTML是否有效,它应该解释HTML中的任何错误以及如何解决这些错误。
如果以上内容无法修复,请告诉我,我很乐意再看看。
编辑:忘了还说明我删除了当前css声明的高度和宽度,这是不必要的,几乎肯定会导致间距问题。