-1

应该是这样的：（ 来源：gyazo.com）图像

我的尝试

<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
（来源：gyazo.com）

你能看到当前项目和其他项目之间有很大的空间吗？我该如何删除这个？使其与其他空间相等。

我尝试过的事情：

添加相对位置

结果：菜单项“当前”超过了菜单项“论坛”

我找不到任何其他方法可以做到这一点，我做错了什么？

4

2 回答 2

0

删除widthon .current。这就是增加额外间距的原因。

如果您不想更改它，请更改相邻 li 的间距：

.current + li {
  padding-left: 0;
}

这是您要完成的工作的简化演示。从中学习：

HTML

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

CSS

ul {
    float: right;
}

li {
    display: inline;
    padding: 10px;
}

.current {
    background-image: url('http://placekitten.com/200/200');
}

演示

于 2012-12-23T17:37:55.023 回答
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 验证器检查您的 HTML 是否有效，它应该解释您的 HTML 中的任何错误以及如何修复它们。

让我知道以上是否解决了它，我会很高兴再看看。

编辑：忘了还声明我删除了当前 css 声明中的高度和宽度，这是不必要的，而且几乎肯定会导致间距问题。

于 2012-12-23T18:03:54.733 回答