css - div里面嵌套了ul，为什么div的高度小于ul高度

问题描述

问 题

div高度见阴影部分

ul高度见阴影部分

实现的html代码如下：
<div class="navBar">

        <ul>
            <li>
                <div id="hot"  onclick="show(id)">热门</div>
            </li>
            <li>
                <div id="today"  onclick="show(id)">推荐</div>
            </li>
        </ul>
    </div>

css代码如下：

.navBar {

clear: both;
width: 100%;
border: solid;
/*border-top: solid;*/
border-bottom: solid;
border-width: 1px;
border-color: #dddddd;
margin:0px;
height: 1.5em;

}

.navBar ul {

width: 100%;
height: inherit;
background-color: white;
margin-top: 8px;
text-align: center;
padding-left: 10px;
padding-bottom: 0px;
margin-bottom: 0px;

}

.navBar ul li{

float: left;
display: inline-block;
vertical-align: middle;
list-style: none;
padding-right: 20px;
margin-bottom: 0px;
padding-bottom: 0px;
height: inherit;

}
.navBar ul li div{

clear: both;
font-size: 14px;
color: #929292;
height: inherit;
margin-left: 0px;
padding-left: 20px;
padding-right: 20px;
margin-bottom: 0px;
padding-bottom: 0px;
/*padding-bottom: 0.6em;*/

/*border-bottom: solid;*/
/*border-color: #00B7FF;*/
/*border-width: 2px;*/

}

解决方案

li设置了浮动后影响到父级了，清楚浮动：clear: both;overflow：hidden;
仅仅clear: both;达不到清除浮动效果的

这篇关于css - div里面嵌套了ul，为什么div的高度小于ul高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！