0

这基本上是我现在面临的问题，http://jsfiddle.net/NCJeP/。

HTML

      <nav>
    <ul id="city-navigation">
        <li><a href="../chennai/" class="active">Chennai</a></li>
        <li><a href="../trichy/">Trichy</a></li>
        <li><a href="../madurai/">Madurai</a></li>
        <li><a href="../coimbatore/">Coimbatore</a></li>
        <li><a href="../salem/">Salem</a></li>
    </ul>
    </nav>​

CSS

#city-navigation {
    width: 100%;
    position: relative;
    left: 10px;
}

#city-navigation li a {
    float: left;
    font: 14px Rockwell, Georgia, Times, “Times New Roman”, serif;
    margin: 20px 20px;
    color: #FFF;
}

#city-navigation li a:hover {
    background-image: url(http://i.imgur.com/QVzKG.png);
    background-repeat: no-repeat;
    color: #000;
    width: 116px;
    height: 60px;
    display: block;
    text-align: center;
    position: relative;
    z-index: 4;
}

#city-navigation .active {
    background-image: url(http://i.imgur.com/HbLa1.png);
    background-repeat: no-repeat;
    color: #000;
    width: 116px;
    height: 60px;
    display: block;
    text-align: center;
}​

由于背景图像添加的额外宽度，我似乎无法弄清楚如何阻止文本向右移动。我知道有足够的空间，我只希望图像和文本是静态的。

如果有人可以提供帮助，我将非常感谢！=) 干杯！

4

3 回答 3

2

悬停的宽度导致跳跃。我将它移到“a”标签并清理了其他代码：

#city-navigation li a {
    float: left;
    font: 14px Rockwell, Georgia, Times, “Times New Roman”, serif;
    margin: 20px 20px;
    color: #FFF;
    display: block;
    text-align: center;
    width: 116px;
    height: 60px;
}
#city-navigation li a:hover {
    background: url(http://i.imgur.com/QVzKG.png) no-repeat;
    color: #000;
}
#city-navigation .active {
    background: url(http://i.imgur.com/HbLa1.png) no-repeat;
    color: #000;
}
于 2012-10-23T04:48:55.560 回答
1

#city-navigation .active从和中删除 width 属性#city-navigation li a:hover，这会导致在悬停列表项时宽度增加。

这将使您的CSS代码看起来像

body {
    background-color: red;
}

#city-navigation {
    width: 100%;
    position: relative;
    left: 10px;
}

#city-navigation li a {
    float: left;
    font: 14px Rockwell, Georgia, Times, “Times New Roman”, serif;
    margin: 20px 20px;
    color: #FFF;
}

#city-navigation li a:hover {
    background-image: url(http://i.imgur.com/QVzKG.png);
    background-repeat: no-repeat;
    color: #000;
    height: 60px;
    display: block;
    text-align: center;
    position: relative;
    z-index: 4;
}

#city-navigation .active {
    background-image: url(http://i.imgur.com/HbLa1.png);
    background-repeat: no-repeat;
    color: #000;
    height: 60px;
    display: block;
    text-align: center;
}​
于 2012-10-23T04:45:58.037 回答
1

这样做：我的小提琴

以为我没有为您清理，而是使用inline-block并删除导航周围不必要的边距..

CSS

body {
    background-color: red;
}

#city-navigation {
    width: 100%;
    position: relative;
    left: 10px;
}

#city-navigation li a {
    float: left;
    font: 14px Rockwell, Georgia, Times, “Times New Roman”, serif;
    margin: 20px 0px;
    color: #FFF;
    display: inline-block;
    width: 116px;
    text-align: center;
}

#city-navigation li a:hover {
    background-image: url('http://i.imgur.com/QVzKG.png');
    background-repeat: no-repeat;
    color: #000;
    width: 116px;
    height: 60px;
    display: inline-block;
    text-align: center;
    position: relative;
}

#city-navigation .active {
    background-image: url('http://i.imgur.com/HbLa1.png');
    background-repeat: no-repeat;
    color: #000;
    width: 116px;
    height: 60px;
    display: block;
    text-align: center;
}
于 2012-10-23T04:51:45.683 回答