Question

我试图为网站制作一个导航栏，当然，我需要它以居中和列出项目浮动。我的问题是导航栏下的图像随之浮动，我使用了清晰：两种属性，所以我很困惑。 HTML代码如下：

<body>

<div id="header">
  <img src="img/headerImg.jpg" alt="Header image" id ="headerImg" />

  <div id = "nav">
    <ul>
  <li class="menuItem"><a href = "index.html">Početna</a></li>
  <li class="menuItem"><a href = "">Dizajn</a></li>
  <li class="menuItem"><a href = "">Web programiranje</a></li>
  <li class="menuItem"><a href = "">Ostale usluge</a></li>
  <li class="menuItem"><a href = "">Kontakt</a></li>
</ul>
  </div> <!--close nav-->

</div> <!--close header-->

<div id="indexContent">

  <div class="indexContentItem">
    <img src="img/indexDes.jpg" alt="Dizajn" class="indexContentImg"/>
    <p><a href="">Dizajn</a></p>
  </div>

  <div class="indexContentItem">
    <img src="img/indexProg.jpg" alt="Web programiranje" class="indexContentImg"/>
    <p><a href="">Web programiranje</a></p>
  </div>

  <div class="indexContentItem">
    <img src="img/indexRest.png" alt="Ostale usluge" class="indexContentImg"/>
    <p><a href="">Ostale usluge</a></p>
  </div>

</div> <!--close indexContent-->

CSS就是：

#nav{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    clear: both;
}

#nav li{
    list-style-type: none;
    text-align: center;
    width: 12em;
    float: left;
}

#nav ul{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#nav a{
    display: block;
}

.indexContentItem{
    float: left;
}

.indexContentItem img{
    display: block;
    height: 15.625em;
    width: auto;
}

.indexContentItem p{
    text-align: center;
}

当然，我只粘贴相关部分，它是一个模型版本，因为它仍在构建中，但是这个截图应该让你知道发生了什么：

screenshot:

Answer 1

您可能想尝试一下：

#nav{
width: 90%;
margin-left: auto;
margin-right: auto;
clear: both;
position: absolute;
}

position属性有不同的选项，这可能会有所帮助： http://www.w3schools.com/css/css_positioning.asp

Answer 2

Clearfix应该可以解决您的问题。

#nav:after {
  content: "";
  display: table;
  clear: both;
}

CSS3浮动元素不会清除

2 个答案: