为什么我设置的dl列表字体是一样大，而且上下行间间隔很宽
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, 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="top-bar"> <!-- 版心 --> <div class="center-wrap"> <!-- 导航条 --> <nav class="quick-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="small-menu sqmenu"> <ul> <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="small-menu scmenu"> <ul> <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="small-menu jdmsmenu"> <ul> <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> <!-- 工具 --> <div class="tools"> <a href="" class="iconfont"></a> <span>|</span> <a href="" class="iconfont"></a> <a href="" class="iconfont"></a> <a href="" class="iconfont"></a> <a href="">登录</a> <a href="">注册</a> </div> </div> </div> <!-- 主要导航条 --> <nav class="main-nav"> <div class="center-wrap"> <ul> <li class="menu"> <a href="">机酒自由行</a> <div class="small-menu jjzyxmenu"> <dl> <dt>全部</dt> <dd> <a href="#">自由行</a> <a href="#">优惠机票</a> <a href="#">酒店</a> <a href="#">邮轮</a> <a href="#">定制游</a> <a href="#">马尔代夫</a> <a href="#">海岛游</a> </dd> </dl> </div> </li> <li> <a href="">优惠机票</a> </li> <li class="menu"> <a href="">跟团游</a> <div class="small-menu gtymenu"> <dl> <dt>全部</dt> <dd> <a href="#">跟团游</a> <a href="#">半自动助游</a> </dd> </dl> </div> </li> <li> <a href="">酒店</a> </li> <li class="menu"> <a href="">当地玩乐</a> <div class="small-menu ddwlmenu"> <dl> <dt>全部</dt> <dd> <a href="#">日游小团</a> <a href="#">深度体验</a> <a href="">门票票卷</a> <a href="">餐饮美食</a> <a href="">WIFI电话卡</a> <a href="">购物</a> <a href="">交通票卷</a> </dd> </dl> </div> </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> <div class="small-menu sdlymenu"> <dl> <dt>全部</dt> <dd> <a href="#">CityWalk</a> <a href="#">特色长线</a> <a href="">Q-Home</a> </dd> </dl> </div> </li> <li> <a href="">私人定制</a> </li> </ul> </div> </nav> <!-- 主题 --> <div class="head-main"> <div class="center-wrap"> <h1>慕云游商城</h1> <div class="soso"> <input type="text" name="" id="" placeholder="找酒店、飞机、按摩……"> <a href="" class="btn iconfont"></a> </div> </div> </div> </header></body></html>
.site-head {
height: 150px;
}
/* 顶层 */
.site-head .top-bar {
height: 32px;
background-color: #2A2A2A;
line-height: 32px;
color: white;
font-size: 12px;
}
.site-head .top-bar .center-wrap .quick-links ul li a {
color: white;
}
.site-head .top-bar .center-wrap .quick-links {
float: left;
}
.site-head .top-bar .center-wrap .quick-links > ul {
}
.site-head .top-bar .center-wrap .quick-links > ul > li {
float: left;
margin-right: 18px;
}
.site-head .top-bar .center-wrap .quick-links > ul > li.menu {
padding-right: 12px;
position: relative;
}
.site-head .top-bar .center-wrap .quick-links > ul > li.menu .arrow {
position: absolute;
top: 50%;
margin-top: -6px;
right: 0px;
width: 12px;
height: 12px;
/* background-color: orange; */
transition: transform .2s ease 0s;
}
.site-head .top-bar .center-wrap .quick-links > ul > li.menu:hover .arrow {
transform: rotate(180deg);
}
.site-head .top-bar .center-wrap .quick-links > ul > li.menu .arrow b {
position: absolute;
width: 8px;
height: 8px;
background-color: white;
transform: rotate(45deg);
top: 0px;
left: 1px;
}
.site-head .top-bar .center-wrap .quick-links > ul > li.menu .arrow i {
position: absolute;
width: 8px;
height: 8px;
background-color: #2A2A2A;
transform: rotate(45deg);
top: -2px;
left: 1px;
}
.site-head .top-bar .center-wrap .quick-links > ul > li.menu .small-menu {
position: absolute;
background-color: #fff;
top: 30px;
left: 0px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.20);
display: none;
z-index: 9999;
}
.site-head .top-bar .center-wrap .quick-links > ul > li.menu:hover .small-menu {
display: block;
}
.site-head .top-bar .center-wrap .quick-links > ul > li.menu .sqmenu {
width: 113px;
height: 162px;
padding-left: 8px;
padding-top: 6px;
}
.site-head .top-bar .center-wrap .quick-links > ul > li.menu .scmenu {
width: 76px;
height: 174px;
padding-top: 6px;
padding-left: 8px;
}
.site-head .top-bar .center-wrap .quick-links > ul > li.menu .jdmsmenu {
width: 64px;
height: 66px;
padding-top: 6px;
padding-left: 8px;
}
.site-head .top-bar .center-wrap .quick-links > ul > li.menu .small-menu ul li {
line-height: 18px;
}
.site-head .top-bar .center-wrap .quick-links > ul > li.menu .small-menu ul li a {
font-size: 12px;
color: #1C1F21;
line-height: 18px;
}
.site-head .top-bar .center-wrap .quick-links > ul > li.menu .small-menu ul li a:hover {
color: orange;
}
.site-head .top-bar .center-wrap .tools {
width: 225px;
float: right;
}
.site-head .top-bar .center-wrap .tools a,.site-head .top-bar .center-wrap .tools span{
color: white;
font-size: 14px;
margin-right: 11px;
}
.site-head .top-bar .center-wrap .tools a:last-child {
margin-right: 0px;
}
/* 主要导航条 */
.site-head .main-nav {
height: 40px;
background-color: #20BD9A;
/* overflow: hidden; */
}
.site-head .main-nav ul li {
float: left;
margin-right: 18px;
line-height: 40px;
font-size: 16px;
}
.site-head .main-nav ul li a {
color: white;
}
.site-head .main-nav ul li.menu {
padding-right: 16px;
position: relative;
}
.site-head .main-nav ul li .small-menu {
position: absolute;
top: 35px;
left: 0px;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.20);
padding: 6px 8px;
display: none;
}
.site-head .main-nav ul li:hover .small-menu {
display: block;
}
.site-head .main-nav ul li .jjzyxmenu {
width: 160px;
}
.site-head .main-nav ul li .gtymenu {
width: 106px;
}
.site-head .main-nav ul li .ddwlmenu {
width: 172px;
}
.site-head .main-nav ul li .sdlymenu {
width: 118px;
}
.site-head .main-nav ul li .small-menu dl dd a {
color: #1C1F21;
font-size: 12px;
}
.site-head .main-nav ul li .small-menu dl dd a:hover {
color: orange;
}
.site-head .main-nav ul li .small-menu dl dt {
font-size: 14px;
color: #1C1F21;
}
.site-head .main-nav ul li.menu::before {
content: '';
position: absolute;
right: -1px;
top: 18px;
width: 0px;
height: 0px;
border: 6px solid transparent;
border-top-color: white;
border-bottom: none;
transition: transform .5s ease 0s;
}
.site-head .main-nav ul li.menu:hover::before {
transform: rotate(180deg);
}
.site-head .head-main {
height: 36px;
padding: 21px 0px;
}
.site-head .head-main .center-wrap h1 {
font-size: 24px;
color: #20BD9A;
float: left;
line-height: 36px;
font-weight: bold;
margin-right: 20px;
}
.site-head .head-main .center-wrap .soso {
width: 405px;
height: 30px;
float: left;
padding-top: 5px;
}
.site-head .head-main .center-wrap .soso input {
width: 361px;
height: 28px;
border: 1px solid #20BD9A;
padding-left: 10px;
outline: none;
float: left;
border-radius: 4px 0px 0px 4px;
}
.site-head .head-main .center-wrap .soso a {
width: 32px;
height: 30px;
float: left;
background-color: #20BD9A;
}
.site-head .head-main .center-wrap .soso .btn {
color: white;
line-height: 30px;
text-align: center;
font-size: 20px;
border-radius: 0px 4px 4px 0px;
}27
收起
正在回答
2回答
同学你好，经过再次测试，li设置的行高视频中是没有的，是给a元素‘机酒自由行’设置的40px，然后再给下面的a设置行高为20px进行覆盖。参考修改：
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星