HTML5和CSS3 </ul>的奇怪的<ul>元素行为

时间:2013-06-25 23:40:18

标签: html5 css3 html-lists

我正在尝试使用包含在无序列表中的4个图像制作一个简单的导航栏。

我遇到了问题,因为条形图没有排列,它的作用就像它嵌套在其中的父div有一个padding-left分配给它并将无序列表推向右边。这是一张正在发生的事情的图片:

enter image description here

我在主导航div上有一个边框,看看发生了什么。

这是我的代码:

<div id="container">
    <div id="header">
      <h1 class="hidden">Blue Ridge Fencing</h1>
    </div>
  <div id="navigation">
    <ul>
        <li><img src="images/website_build/nav_bar/home.jpg" width="208" height="50" alt="Home" border="0"></li>
        <li><img src="images/website_build/nav_bar/about.jpg" width="227" height="50" alt="About" border="0"></li>
        <li><img src="images/website_build/nav_bar/contact_us.jpg" width="290" height="50" alt="Contact Us" border="0"></li>
        <li><img src="images/website_build/nav_bar/quote.jpg" width="235" height="50"    alt="Quote" border="0"></li>
    </ul>
  </div>
    <div id="content">

    </div>
</div>

CSS:

#navigation {
    height: 50px;
    width: 1000px;
    background-image: url(../images/backgrounds/otis_redding.png);
    overflow: hidden;
    padding: 0px;
    border: 1px solid #000;
}

#container #navigation ul {
    margin: 0px;
    list-style-type: none;
    font-size: 34px;
}

#container #navigation li {
    float: left;
}

提前谢谢!

2 个答案:

答案 0 :(得分:2)

<ul>元素通常具有由浏览器(或您的一个样式表)设置的默认填充。只需删除它:

#navigation ul {
    padding:0;
}

如果您还没有:

,可能需要考虑使用CSS重置

答案 1 :(得分:0)

您需要从ul元素中删除填充。您可以在css中将padding: 0;添加到#container #navigation ul