CSS滑动门不工作

这可能是一个愚蠢的问题，但无法找到谷歌的答案。图像左侧显示正常，不能为我的生活得到正确的图像显示。CSS滑动门不工作

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

来源

2012-07-03 HandsomeRob

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

来源

2012-07-03 18:47:57 Paradise

谢谢！不能相信他们不包括在课堂上。 – HandsomeRob

的衬垫在#nav li a被允许tabLeft背景图像中#nav li上tabRight背景图像的顶部覆盖。

尝试将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-03 18:26:21

谢谢，试了一下。新代码已经启动，仍然没有快乐。 – HandsomeRob

我会在一会儿发布我的推拉门代码，希望你能适应:) –

看起来你的例子中发生的事情是#nav li a'的'float：left'属性没有被清除，所以背景图像不会显示出来。你可以尝试在你的'#nav li' CSS中加入'overflow：auto;'。 –

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

来看，它的外形尺寸是目前0 0所以该图片没有空间来显示

如果你改变你的代码

 

    #nav li{ 
    display: block; 
    width: 250px; 
    height: 30px; 
    background: url('../images/tabRight.png') no-repeat right top; 
    }

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

来源

2012-07-03 18:55:18 AnthonyS

CSS滑动门不工作

回答

相关问题