制作網(wǎng)站首頁導(dǎo)航欄,左中右三部分,全部設(shè)置左浮動,總寬度:1000px,寬度:左10px,中980px,右10px,左邊部分總是不能跟中右兩部分放到一行內(nèi)
錯誤圖片:
網(wǎng)頁部分:
<!-- nav開始 -->
? ? ? ? <div class="nav">
? ? ? ? ? ? <div class="nav_left"></div>
? ? ? ? ? ? <div class="nav_mid">
? ? ? ? ? ? ? ? <div class="nav_mid_left">
? ? ? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">首頁</a></li>
? ? ? ? ? ? ? ? ? ? ? ? <li><a href="list.html">關(guān)于慕課</a></li>
? ? ? ? ? ? ? ? ? ? ? ? <li><a href="list.html">新聞動態(tài)</a></li>
? ? ? ? ? ? ? ? ? ? ? ? <li><a href="list.html">課程中心</a></li>
? ? ? ? ? ? ? ? ? ? ? ? <li><a href="list.html">在線課程</a></li>
? ? ? ? ? ? ? ? ? ? ? ? <li><a href="list.html">人才招聘</a></li>
? ? ? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <div class="nav_mid_right">
? ? ? ? ? ? ? ? ? ? <form action="" method="post">
? ? ? ? ? ? ? ? ? ? ? ? <input type="text"/>
? ? ? ? ? ? ? ? ? ? </form>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="nav_right"></div>
? ? ? ? </div>
? ? ? ? <!-- nav結(jié)束 -->
css部分:
.wrap{
? ? width: 1000px;
? ? margin: 0 auto;
}
.nav{
? ? height: 40px;
}
.nav_left{
? ? width: 10px;
? ? background: url('../images/nav_left.jpg') no-repeat;
}
.nav_mid{
? ? width: 980px;
? ? background: url('../images/nav_bg.jpg') repeat-x;
}
.nav_right{
? ? width: 10px;
? ? background: url('../images/nav_right.jpg') no-repeat;
}
.nav_left,.nav_mid,.nav_right{
? ? float: left;
? ? height: 40px;
? ? /* 元素內(nèi)沒有內(nèi)容,無法撐開,設(shè)置高度將元素?fù)伍_ */
}
找了好久找不到問題到底出在哪里,把中間部分寬度調(diào)到700px以下才能讓左中右在同一行顯示,請各位大神幫幫忙
2020-05-21
?.logo{? 里面的
????????????height:?80px;? ?改成height: 84px;
2020-05-15
問題分析:
.nav{
? ? height: 40px;
}
沒有指定寬度
以下是我的代碼
.nav?{
??width:?1000px;
??height:?40px;
??margin:?0?auto;
}
.nav_left?{
??width:?10px;
??background:?url(../images/nav_left.jpg)?no-repeat;
}
.nav_mid?{
??width:?980px;
??background:?url(../images/nav_bg.jpg)?repeat-x;
}
.nav_right?{
??width:?10px;
??background:?url(../images/nav_right.jpg);
}
.nav_left?,?.nav_mid?,?.nav_right?{
??height:?40px;
??float:?left;
}
.nav_right?{
??width:?10px;
??background:?url(../images/nav_right.jpg);
}
.nav_left?,?.nav_mid?,?.nav_right?{
??height:?40px;
??float:?left;
}