css二级导航浮动问题,为什么二级导航没有浮动

http://img.mukewang.com/5da0470c0001266411060156.jpg
请问为什么我的二级导航没有浮动起来

http://img2.mukewang.com/5da0462a00010b2309050139.jpg

给定ul宽度的时候才浮起来了 我的一级导航栏不要定宽度也能浮动起来啊这是为什么。哪些错了求解。

<style type="text/css">

li,ul {

list-style: none;

padding: 0;

margin: 0;

}

.nav{

margin-top: 20px;

height: 44px;

background: linear-gradient(114deg,#00d0d4 5%,#00c5c3 51%,#9effa4 100%);

}



.nav .nav_li_div{

position: relative;

height: 44px;

margin: 0 auto;

font-size: 16px;

font-weight: bold;

}



.nav .nav_li_div .nav_li{

position: relative;

float: left;

height: 44px;

width: 60px;

text-align: center;

line-height: 44px;

}



.nav .nav_li_div .nav_li a{

display: block;

height: 44px;

text-decoration: none;

color: white;

}



.nav .nav_li_div .nav_li:hover{

text-decoration: none;

color: white;

background: #00BCD4;

}



.nav .nav_li_div .nav_li_active{

background: #00BCD4;

}



.nav_tag_local{

position: absolute;

top: -10px;

left: 545px;

z-index: 2;

}

.nav .nav_li_div .nav_li .second_nav_div{

background: white;

border: 1px solid #00bcd4;

position: absolute;

height: 44px;

top: 42px;

font-size: 14px;

z-index: 2;

display: block;

/* display: none; */

}



.nav .nav_li_div .nav_li .second_nav_div li{

float: left;

height: 42px;

}



.nav .nav_li_div .nav_li .second_nav_div li a{

font-size: 12px;

text-align: center;

color: #666;

width: 80px;

height: 42px;

display: block;

line-height: 42px;

text-decoration: none;

}



.nav .nav_li_div .nav_li .second_nav_div li:hover{

background: #E0F7FA;

}

</style>

2个回答

将float:left改为display: flex就可以了
前端布局神器display:flex

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问