0

这可能是一个愚蠢的问题，但无法通过谷歌找到答案。图像的左侧显示正常，我一生都无法获得正确的图像来显示。

HTML/CSS 新手，只是学习基础知识。

http://bungle.ca/ http://bungle.ca/images/

<ul id="nav">
   <li><a href="#">Link One</a></li>
   <li><a href="#">Link Two</a></li>
   <li><a href="#">Link Three</a></li>
   <li><a href="#">Link Four</a></li>
   <li><a href="#">Link Five</a></li>
   <li><a href="#">Link Six</a></li>
</ul>

#nav{
min-width:  1024px;
height: 30px;
padding:    0px;
margin: 0px;
color:  #eeeeee;
white-space:    nowrap;
list-style-type:    none;
}

#nav li{
display:    inline;
background: url('../images/tabRight.png') no-repeat right   top;
}

#nav li a{
padding:    .2em    1em;
height: 30px;
width:  100px;
text-decoration:    none;
float:  left;
text-align: center;
background: url('../images/tabLeft.png')    no-repeat   left    top;
}
4

3 回答 3

0

填充#nav li a允许 tabLeft 背景图像覆盖在 tabRight 背景图像的顶部#nav li。

尝试添加margin-right: 10px;到#nav li a元素，其中 10px 是 tabRight.png 图像的实际宽度。或者，您可以添加padding-right: 10px;到#nav li元素。您需要#nav li a相应地调整正确的填充，以便按钮具有适当的尺寸。

这是我一直使用的推拉门代码：

<li><a href="#" class="oneup">See Our Breads</a></li>

li {
    background: url(img/button_gold_right.gif) top right no-repeat;
    padding: 0 10px 0 0; /* 10px is width of _right.gif image)
    display: block;
    height: 23px; /* height & line-height the same so text centered vertically */
    line-height: 23px;
    float: left;
}

li a {
    display: block;
    background: url(img/button_gold_left.gif) top left no-repeat;
    padding: 0 0 0 10px; /* 10px on left so text is centered horizontally */
}
于 2012-07-03T18:26:21.867 回答
0

只需添加display:inline-block;到#nav li

于 2012-07-03T18:47:57.223 回答
0

另外：调试 CSS 的一个好方法是使用firebug或 Mozilla 或 Chrome 中的 Inspect 元素。要触发检查元素，请右键单击浏览器并点击检查元素。在右侧，您可以通过更改属性来修改 css，您可以通过在检查元素控制台中单击该元素来查看每个元素的特定 css 属性。

查看您的导航 li，它的尺寸目前为 0 x 0，因此没有空间显示图像

如果您将代码更改为

    #导航李{
    显示：块；
    宽度：250px；
    高度：30px；
    背景： url('../images/tabRight.png') 不重复右上角；
    }

您现在可以看到您的 tabRight 图像。

于 2012-07-03T18:55:18.203 回答