Question

嘿伙计我是网页设计的新手，但是无法让我的导航在顶部对齐或从li中移除子弹。我已经解决了它，但它开始干扰页面的其余部分所以我重新设计了一些，现在无法让它工作。任何帮助将不胜感激！

.menuitem {
    list-style-type: none;
    text-align: center;
    color: #fff;
    text-decoration: none;
    width: 240px;
}

#navigation {
    width: 1000px;
    background-color: #0b61a4;
    font-size: 18pt;
}

nav a:visited{
    text-decoration: none;
    width: 240px;
    float: left;
    margin-left: -20px;
    margin-bottom: -6px;
}

nav a:hover {
    color: #CED9D9;
    text-decoration: none;
    width: 240px;
    float: left;
    margin-left: -20px;
    margin-bottom: -6px;
}

nav a:link{
    text-decoration: none;
    width: 240px;
    float: left;
    margin-left: -20px;
    margin-bottom: -6px;
}

nav a:active {
    text-decoration: none;
    width: 240px;
    float: left;
    margin-left: -20px;
    margin-bottom: -6px;
}

HTML

<div id="navigation">
  <ul>                 
    <li><a href="index.html" class="menuitem">Home</a></li>                 
    <li><a href="pharmacy_solutions" class="menuitem">Pharmacy Solutions</a></li>                 
    <li><a href="about_us.html" class="menuitem">About Us</a></li>                 
    <li><a href="contact_us.html" class="menuitem">Contact Us</a></li>             
  </ul>         
</div>

Answer 1

这样的事情怎么样？ http://jsfiddle.net/ACQ27/2/

#navigation {
    width: 1040px;
    background-color: #0b61a4;
    font-size: 18pt;
}

#navigation ul{
    list-style-type: none;
    text-align: center;
    color: #fff;
     display:inline-block;
}
#navigation ul li {
     display:inline-block;
     width: 240px;
    margin-bottom: -6px;
}

#navigation ul li a {
    color: #fff;
    text-decoration: none;
}

#navigation ul li a:hover {
    color: #CED9D9;

}

不能让我的导航正常工作

1 个答案: