css导航栏的疑问
本文介绍了css导航栏的疑问的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<style type="text/css">
.nav {
list-style-type: none;
margin: 0;
padding: 0;
background-color: aquamarine;
}
ul.nav a {
float: left;
display: block;
height: 2em;
line-height: 2em;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="">home</a></li>
<li><a href="">likn</a></li>
<li><a href="">joe</a></li>
</ul>得到的效果是这样的
奇怪为什么会这样？
应该是这样的吧
li元素是块级元素并且上下摞起来排列的，那么就算a标签浮动起来也是在li元素里的左边啊，怎么会水平排列了?
仔细看了楼下所有小伙伴的答案，结合自己的理解总结一下，浮动不仅看设置了浮动属性的元素本身，还要看它的父元素，如果父元素没有足以支撑浮动元素的宽高设置，那么浮动元素就会带着父元素一起浮动
如果
li {
border: 1px solid red;
height: 20px; /*给li设置高度*/
}或者
<li><a href="">home</a>kkkkk</li> /*给li填充内容*/
<li><a href="">concat</a>kkkk</li>
<li><a href="">back</a>kkkk</li>
感谢楼下各位，谢谢你们的无私分享
解决方案
原因是设置了<a>标签浮动以后，父元素<li>没有被撑开，解决代码：
方案一：
设置<a>为行内块元素
<style type="text/css">
.nav {
list-style-type: none;
margin: 0;
padding: 0;
background-color: aquamarine;
}
ul.nav a {
display: inline-block;
height: 2em;
line-height: 2em;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="">home</a></li>
<li><a href="">likn</a></li>
<li><a href="">joe</a></li>
</ul>
方案二：
对<li>的after清除浮动
<style type="text/css">
.nav {
list-style-type: none;
margin: 0;
padding: 0;
background-color: aquamarine;
}
ul.nav a {
float: left;
display: block;
height: 2em;
line-height: 2em;
}
li:after{
content: "";
clear: both;
display: block;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="">home</a></li>
<li><a href="">likn</a></li>
<li><a href="">joe</a></li>
</ul>这篇关于css导航栏的疑问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
