我遇到了这个问题,我希望它是如此简单,这就是我无法理解的原因。
我想在导航<li>
元素之间使用图像分割器。
这是我的CSS:
#nav {
width:70.5%;
padding-left:29.5%;
list-style: none;
margin: 0px auto;
float:left;
background-image:url(images/bk_nav.gif);
background-repeat:repeat-x;
display:block;
text-align:center;
#margin-top:-4px;
}
#nav li {
float: left;
margin: 0px;
text-align:center;
font: 13px/100% Helvetica, Arial, sans-serif;
background-color:#cccccc;
}
.divide
{
position:relative;
float:left;
width:4px;
height:42px;
background-image:url(images/divider.gif);
}
#nav a {
color: #ffffff;
text-decoration: none;
text-align:center;
padding: 14px 25px 14px 25px;
font: 14px/100% Helvetica, Arial, sans-serif;
display: block;
text-align:center;
}
这是HTML:
<ul id="nav">
<li class="page-item-2 current_page_item"><a href="index.html">Home</a></li><span class="divide"></span>
<li class="page-item-20"><a href="aboutus.html">Our Program</a></li>
<li class="page-item-10"><a href="econsus.html">Social</a></li>
<li class="page-item-13"><a href="socialsus.html">Economic</a></li>
<li class="page-item-15"><a href="envsus.html">Environmental </a></li>
<li class="page-item-17"><a href="resources.html">Resources </a></li>
</ul>
目前我只有一个分频器,因为我正在测试它。此代码在FF中工作正常,但IE被其破坏。有人对这种令人沮丧的情况有所了解吗?
更新:
一个是正确的而另一个不是。我能够在FF中创建相同的错误,因此您可以看到两者。 (刚刚移动了<span>
)
答案 0 :(得分:2)
首先是第一件事:
span
不能是ul
元素的直接子元素。它不是标准的HTML,所以不知道会发生什么。只有li
s可以是ul
s的孩子。
建议:
我会,如果是你,请将divide
课程改为li
。这样,你至少有标准的HTML,也许它甚至可以修复页面。除此之外,我需要一个演示链接,因为熊会吃你建议任何帮助。
我不完全确定“整个背景”的含义,但我建议您使用background-position
和background-repeat
来提供帮助。仔细阅读these,它可以帮助您弄清楚您想做什么。
答案 1 :(得分:2)
<ul>
<li>list item</li>`
<li class="divider"></li>
<li>list item 2</li>
</ul>
然后,为了使分隔符看起来更接近列表项,只需调整.divider类的边距/填充