CSS3 浮动元素不会清除

Question

I'm trying to make a navigation bar for a website and I need it, of course, to be centered and list items floated.我正在尝试为网站制作导航栏，当然，我需要它居中并浮动列表项。 My problem is that the images under the navigation bar keep floating along with it and I used clear:both property, so I'm confused.我的问题是导航栏下的图像一直随着它浮动，我使用了 clear:both 属性，所以我很困惑。 HTML code goes like this: 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-->

And CSS is:而 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;
}

Of course, I pasted only the relevant parts and it is a mockup version as it is still under construction, but this screenshot should give you the idea of what is going on:当然，我只粘贴了相关部分，它是一个模型版本，因为它仍在建设中，但是这个截图应该让你知道发生了什么：

截屏：

Answer 1

You might want to try this:你可能想试试这个：

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

the position attribute has different options, this may help: http://www.w3schools.com/css/css_positioning.asp position属性有不同的选项，这可能会有所帮助： http : //www.w3schools.com/css/css_positioning.asp

Answer 2

Clearfix should solve your problem. Clearfix应该可以解决您的问题。

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

CSS3 浮动元素不会清除

问题描述

2 个解决方案

解决方案1
1 2015-03-26 01:35:30

解决方案2
1 已采纳 2015-03-26 01:40:55

CSS3 浮动元素不会清除

问题描述

2 个解决方案

解决方案1 1 2015-03-26 01:35:30

解决方案2 1 已采纳 2015-03-26 01:40:55

解决方案1
1 2015-03-26 01:35:30

解决方案2
1 已采纳 2015-03-26 01:40:55