老师，为什么主导航条里的文字不会自动横着排列，而是这样竖着排列？
来源：2-7 使用CSS制作菜单
慕神3111110
2021-06-09 20:02:35
/* 页头分为三部分 */
/* 顶端导航条 */
.site-head{
height: 150px;
}
.site-head .topbar{
height: 32px;
background-color: #2A2A2A ;
color: white;
line-height: 32px;
}
.site-head .topbar a{
color:white;
font-size: 12px;
}
.site-head .topbar nav{
float: left;
}
.site-head .topbar nav>ul>li{
float:left;
margin-right: 18px;
}
.site-head .topbar nav>ul>li.menu{
padding-right:14px ;
position: relative;
}
/* 制作菜单栏 */
.site-head .topbar nav>ul>li.menu .mu{
position: absolute;
top: 30px;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.20);
z-index: 999;
display:none;
font-size: 12px;
padding-top:3px;
padding-bottom: 18px;
padding-left: 8px;
}
.site-head .topbar nav>ul>li.menu .mu .menu-list li{
height: 18px;color:black;line-height: 18px;
}
.site-head .topbar nav>ul>li.menu .mu .menu-list li a{
color:black;
}
.site-head .topbar nav>ul>li.menu .shequ{
width: 121px;
}
.site-head .topbar nav>ul>li.menu .shangcheng{
width: 76px;
}
.site-head .topbar nav>ul>li.menu .jiudian{
width:64px;
}
.site-head .topbar nav>ul>li.menu:hover .mu{
display:block;
}
.site-head .topbar nav>ul>li.menu .arrow{
position: absolute;
right: 0;
width: 10px;
height: 10px;
top:50%;
margin-top: -5px;
transition: transform 0.3s linear 0s;
}
.site-head .topbar nav>ul>li.menu .arrow b{
position: absolute;
width: 8px;
height: 8px;
left:2px;
background-color: white;
transform: rotate(45deg);
}
.site-head .topbar nav>ul>li.menu .arrow i{
position: absolute;
width: 8px;
height: 8px;
bottom: 3px;
left:2px;
background-color:#2A2A27 ;
transform: rotate(45deg);
}
.site-head .topbar nav>ul>li.menu:hover .arrow{
transform:rotate(180deg);
}
/* 字体图标 */
.site-head .topbar .nav-r{
float: right;
width: 240px;height: 20px;
}
.site-head .topbar .nav-r a{
display: block;
width: 20px;
float: left;
line-height:20px ;
font-size:20px;
margin:8px;
}
.site-head .topbar .nav-r a:nth-child(2){
width: 1px;
}
.site-head .topbar .nav-r a:nth-last-child(1),.site-head .topbar .nav-r a:nth-last-child(2){
font-size:12px;
width: 24px;
}
.site-head .topbar .nav-r a:nth-last-child(1){
margin-right: 0px;
}
/* 主导航条 */
.site-head .main-nav{
height: 40px;
background-color: #20BD9A;
}
.site-head .main-nav .center-wrap>ul{
float:left;
height: 40px;
width: 1152px;
}
.site-head .main-nav .center-wrap ul li{
float:left;
margin-right: 18px;
position: relative;
}
.site-head .main-nav ul li.menu{
padding-right:16px;
}
.site-head .main-nav ul li a{
line-height: 40px;
font-size: 16px;
}
.site-head .main-nav ul li.menu::after {
content: '';
position: absolute;
right: 0;
width: 0;
height: 0;
border: 8px solid transparent;
border-top: 8px solid white;
top: 50%;
margin-top:-4px;
border-bottom: none;
transition:transform .3s linear 0s;
}
.site-head .main-nav ul li.menu:hover::after{
transform: rotate(180deg);
}
/* 主导航的菜单栏 */
.site-head .main-nav .center-wrap ul .menu .menu-list{
position: absolute;
top: 30px;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.20);
z-index: 999;
display:none;
font-size: 12px;
padding-top:3px;
padding-bottom: 18px;
padding-left: 8px;
}
.site-head .main-nav .center-wrap ul .menu .menu-list dd{
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #1C1F21;
text-align: justify;
line-height: 22px;
}
.site-head .main-nav .center-wrap ul .menu .menu-list a{
height: 18px;color:black;line-height: 18px;font-size: 12px;
}
.site-head .main-nav .center-wrap ul .menu .jipiao{
width: 160px;
}
.site-head .main-nav .center-wrap ul .menu .gentuan{
width: 106px;
}
.site-head .main-nav .center-wrap ul .menu .dangdi{
width: 172px;
}
.site-head .main-nav .center-wrap ul .menu .shendu{
width: 118px;
}
.site-head .main-nav .center-wrap ul .menu:hover .menu-list{
display:block;
}
/* logo */
.site-head .logo{
height:36px;padding: 21px 0;
padding: 21px 0;
}
.site-head .logo h1{
height:36px;
float: left;
font-size: 24px;
color:#20BD9A;
font-weight: bold;
line-height: 36px;
margin-right: 21px;
}
.site-head .logo .btn{
width: 405px;height: 30px;
float: left;
top: 3px;
}
.site-head .logo .btn input{
width: 373px;
height: 30px;
border: 1px solid #20BD9A;
/* 四个角分别设置圆角：左上 右上 右下 左下 */
border-radius:4px 0 0 4px;
/* 取消默认的外线（外线是文本框默认的东西 ） */
outline: none;
float: left;
}
.site-head .logo .btn .serch{
float:left;
width: 30px;
height: 32px;
background-color: #20BD9A;
}
.site-head .logo .btn .serch img{
width: 20px;
height: 20px;
background-color: #20BD9A;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=muyun, initial-scale=1.0">
<title>慕云游商城 -机票、酒店、旅游攻略</title>
<meta name="keywords" content="机票，酒店，旅游攻略，签证，出国，自由行">
<meta name="description" content="慕云游商城，10年的旅游经验，为您提供全方位的旅游服务">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<!-- 页面头部 -->
<header class="site-head">
<!-- 顶端导航条 -->
<div class="topbar">
<div class="center-wrap">
<nav class="shortcut-links">
<ul>
<li><a href="">目的地</a></li>
<li><a href="">锦囊</a></li>
<li class="menu"><a href="">社区</a>
<em class="arrow">
<b></b>
<i></i>
</em>
<div class="shequ mu">
<ul class="menu-list">
<li> <a href="">旅行论坛</a></li>
<li> <a href=""> 旅行专栏</a></li>
<li> <a href="">旅行问答</a></li>
<li> <a href=""> 旅行生活分享平台 </a></li>
<li> <a href="">jne旅行生活美学 </a> </li>
<li> <a href=""> biu伴（原结伴同行）</a></li>
<li> <a href=""> 负责任的旅行</a></li>
<li> <a href="">特别企划 </a> </li>
</ul>
</div>
</li>
<li><a href="">行程助手</a></li>
<li class="menu"><a href="">商城</a>
<em class="arrow">
<b></b>
<i></i>
</em>
<div class=" shangcheng mu">
<ul class="menu-list">
<li><a href="">机酒自由行</a></li>
<li><a href="">当地玩乐</a></li>
<li><a href="">签证</a></li>
<li><a href="">保险</a></li>
<li><a href="">租车自由</a></li>
<li><a href="">邮轮</a></li>
<li><a href="">河轮</a></li>
<li><a href="">私人订制</a></li>
<li><a href="">欧洲铁路</a></li>
</ul>
</div>
</li>
<li class="menu"><a href="">酒店.名宿</a>
<em class="arrow">
<b></b>
<i></i>
</em>
<div class="jiudian mu">
<ul class="menu-list">
<li><a href="">酒店</a></li>
<li><a href="">爱彼迎</a></li>
<li><a href="">华人旅馆</a></li>
</ul>
</div>
</li>
<li><a href="">特价酒店</a></li>
</ul>
</nav>
<!-- iconfont图标 -->
<nav class="nav-r">
<a class="iconfont" href="">

</a>
<a href="">|</a>
<a class="iconfont" href="">

</a>
<a class="iconfont" href="">

</a>
<a class="iconfont" href="">

</a>
<a href="">登录</a>
<a href="">注册</a>
</nav>
</div>
</div>
<!-- 主导航条 -->
<nav class="main-nav">
<div class="center-wrap">
<ul>
<li class="menu"><a href="">机票自由行</a>
<div>
</div>
<dl class="menu-list jipiao">
<dd>全部</dd>
<dt><a href="">自由行</a></dt>
<dt><a href="">优惠机票</a></dt>
<dt><a href="">酒店</a></dt>
<dt><a href="">邮轮</a></dt>
<dt><a href="">定制游</a></dt>
<dt><a href="">马尔代夫</a></dt>
<dt><a href="">海岛游</a></dt>
</dl>
</li>
<li><a href="">优惠机票</a></li>
<li class="menu"><a href="">跟团游</a>
<dl class="menu-list gentuan">
<dd>全部</dd>
<dt><a href="">跟团游</a></dt>
<dt><a href="">半自助游</a></dt>
</dl>
</li>
<li><a href="">酒店</a></li>
<li class="menu"><a href="">当地玩乐</a>
<dl class="menu-list dangdi">
<dd>全部</dd>
<dt><a href="">日游小团</a></dt>
<dt><a href="">深度体验</a></dt>
<dt><a href="">门票票券</a></dt>
<dt><a href="">餐饮美食</a></dt>
<dt><a href="">Wi-Fi电话卡</a></dt>
<dt><a href="">购物</a></dt>
<dt><a href="">交通票券</a></dt>
</dl>
</li>
<li><a href="">签证</a></li>
<li><a href="">邮轮</a></li>
<li><a href="">河轮</a></li>
<li><a href="">保险</a></li>
<li><a href="">租车自由</a></li>
<li class="menu"><a href="">深度旅游</a>
<dl class="menu-list shendu">
<dd>全部</dd>
<dt><a href="">citywalk</a></dt>
<dt><a href="">特色长线</a></dt>
<dt><a href="">q-home</a></dt>
</dl>
</li>
<li><a href="">私人订制</a></li>
</ul>
</div>
</nav>
<!-- logo -->
<div class="logo">
<div class="center-wrap">
<h1>慕云游商城</h1>
<div class="btn">
<input type="text" placeholder="">
<!-- iconfont图标 -->
<a class="serch" href="">

</a>
</div>
</div>
</div>
</header>
</body>
</html>
写回答
1回答
-
同学你好，因为子元素不会继承祖辈元素设置的float属性，代码中只是给li设置了浮动，并没有给dl、dd和dt设置浮动，代码中使用dt包裹每个文字，而dd和dt默认独占一行，所以是竖着排列的，如下：
视频中老师是将所有的文字放在了一个dd下，使用a标签包裹的，a标签是行内元素，默认一排显示，所以是横着排列。
建议修改：使用dt包裹标题“全部”，将所有文字使用a标签包裹，放在一个dd标签下，dd表示描述的内容，。如下：
祝学习愉快~
0
相似问题