CSS3浮动元素无法清除

Question

我想为一个网站做一个导航栏，当然，我需要它居中，列表项浮动。我的问题是，导航栏下的图片一直跟着浮动，我使用了clear:both属性，所以我很困惑。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:after {
  content: "";
  display: table;
  clear: both;
}

Answer 2

你可能想试试这个。

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

这个 position 属性有不同的选项，这可能会有帮助。http:/www.w3schools.comcsscss_positioning.asp

CSS3浮动元素无法清除

问题描述投票：0回答：2

2个回答

最新问题

CSS3浮动元素无法清除

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2