gpt4 book ai didi

html - CSS3 float 元素不会清除

转载 作者:太空宇宙 更新时间:2023-11-04 03:12:41 24 4
gpt4 key购买 nike

我正在尝试为网站制作一个导航栏,当然,我需要它居中并列出 float 的元素。我的问题是导航栏下的图像一直跟着它 float ,我使用了 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;
}

当然,我只粘贴了相关部分,它是一个模型版本,因为它仍在 build 中,但这个截图应该让你了解发生了什么:

screenshot:

最佳答案

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

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

关于html - CSS3 float 元素不会清除,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29269472/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com