teacher ，为什么bottom值在这里不生效啊
来源：2-11 垂直菜单开发（2）
dawn_eve
2021-10-18 17:28:08
HTML代码部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<div class="banner">
<img src="images/banner2.jpg" alt="">
<div class="center-wrap">
<a class="leftbtn" href=""></a>
<a class="rightbtn" href=""></a>
<div class="banner-nav">
<ul>
<li class="hot">
<dl>
<dt>热门出发地</dt>
<dd>
<span>北京</span>
<span>上海</span>
<span>广深</span>
<span>西南</span>
<span>国内其他</span>
</dd>
</dl>
</li>
<li class="hk">
<dl>
<dt>港澳台 国内</dt>
<dd>
<span>香港</span>
<span>澳门</span>
<span>台湾</span>
<span>国内其他</span>
</dd>
</dl>
</li>
<li class="jp">
<dl>
<dt>日本 韩国</dt>
<dd>
<span>东京</span>
<span>大阪</span>
<span>冲绳</span>
<span>北海道</span>
<span>福冈</span>
</dd>
</dl>
</li>
<li class="as">
<dl>
<dt>东南亚 南亚</dt>
<dd>
<span>泰国</span>
<span>新加坡</span>
<span>印尼</span>
<span>马来西亚</span>
<span>越南</span>
</dd>
</dl>
</li>
<li class="eu">
<dl>
<dt>欧洲 美洲</dt>
<dd>
<span>英国</span>
<span>法国</span>
<span>美国</span>
<span>加拿大</span>
</dd>
</dl>
</li>
<li class="au">
<dl>
<dt>澳新 中东非</dt>
<dd>
<span>澳大利亚</span>
<span>新西兰</span>
<span>迪拜</span>
</dd>
</dl>
</li>
</ul>
<div class="menus-box">
<div class="menu">
<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>
<a href="">澳门塔</a>
<a href="">新濠天地水舞间</a>
<a href="">澳门豪华自助</a>
<a href="">台北101</a>
<a href="">台湾美食</a>
</dd>
<dt>国内热门城市</dt>
<dd>
<a href="">三亚</a>
<a href="">东北雪乡</a>
<a href="">大理</a>
<a href="">丽江</a>
<a href="">昆明</a>
<a href="">西双版纳</a>
<a href="">拉萨</a>
<a href="">成都</a>
<a href="">重庆</a>
<a href="">长白山</a>
<a href="">厦门</a>
<a href="">长沙</a>
<a href="">桂林</a>
<a href="">北京</a>
<a href="">西安</a>
<a href="">敦煌</a>
<a href="">杭州</a>
<a href="">上海</a>
<a href="">无锡</a>
<a href="">南京</a>
<a href="">广州</a>
<a href="">黄山</a>
<a href="">莫干山</a>
<a href="">新疆</a>
<a href="">北海</a>
<a href="">九华山</a>
<a href="">太原</a>
<a href="">张家口</a>
</dd>
<dt>国内热门景点</dt>
<dd>
<a href="">北京故宫</a>
<a href="">东北滑雪</a>
<a href="">恭王府</a>
<a href="">长城</a>
<a href="">青城山大熊猫基地</a>
<a href="">峨眉山</a>
<a href="">都江堰</a>
<a href="">长恨歌表演</a>
<a href="">兵马俑</a>
<a href="">大唐芙蓉园</a>
<a href="">三亚日游</a>
<a href="">厦门鼓浪屿</a>
<a href="">千岛湖</a>
<a href="">呼伦贝尔草原</a>
<a href="">希拉穆仁草原</a>
<a href="">大理日游</a>
<a href="">杭州</a>
<a href="">重庆两江夜游船票</a>
</dd>
</dl>
</div>
<!-- <div class="menu">
<dl>
<dt></dt>
<dd>
</dd>
</dl>
</div>
<div class="menu">
<dl>
<dt></dt>
<dd>
</dd>
</dl>
</div>
<div class="menu">
<dl>
<dt></dt>
<dd>
</dd>
</dl>
</div>
<div class="menu">
<dl>
<dt></dt>
<dd>
</dd>
</dl>
</div>
<div class="menu">
<dl>
<dt></dt>
<dd>
</dd>
</dl>
</div> -->
</div>
</div>
</div>
</div>
</body>
</html>
CSS代码部分：
*{
padding: 0;
margin: 0;
}
ol,ul{
list-style: none;
}
a{
text-decoration: none;
}
.banner{
width: 100%;
position: relative;
}
.banner img{
width: 100%;
min-width: 1152px;
vertical-align: middle;
}
.center-wrap{
width: 1152px;
margin: 0 auto;
/* overflow: hidden; */
}
.banner .center-wrap{
position: absolute;
width: 1152px;
left: 50%;
top:0;
margin-left: -576px;
height: 100%;
}
.banner .center-wrap .banner-nav{
height: 100%;
}
.banner .center-wrap .banner-nav ul{
height: 100%;
}
.banner .banner-nav ul li{
width: 296px;
height: 16.66%;
background-color: rgba(0,0,0,.45 );
border-bottom: 1px solid #9e9e9e;
box-sizing: border-box;
}
.banner .banner-nav ul li:last-child{
border-bottom: none;
}
.banner .center-wrap .leftbtn{
position: absolute;
width: 28px;
height: 44px;
top: 50%;
left: -38px;
margin-top: -22px;
background: url(../images/icons.png) no-repeat -21px -94px;
}
.banner .center-wrap .rightbtn{
position: absolute;
width: 28px;
height: 44px;
top: 50%;
right: -38px;
margin-top: -22px;
background: url(../images/icons.png) no-repeat -21px -29px;
}
.banner .center-wrap .rightbtn:hover,.banner .center-wrap .leftbtn:hover{
opacity: 0.8;
border-radius: 4px;
}
.banner .center-wrap .banner-nav>ul>li{
position: relative;
}
.banner .center-wrap .banner-nav>ul>li::before{
content: "";
position: absolute;
background-image: url("../images/icons.png");
top: 50%;
left: 10px;
}
.banner .center-wrap .banner-nav>ul>li.hot::before{
width: 22px;
height: 18px;
background-position: -29px -399px;
margin-top: -9px;
}
.banner .center-wrap .banner-nav>ul>li.hk::before{
width: 22px;
height: 18px;
background-position: -28px -217px;
margin-top: -9px;
}
.banner .center-wrap .banner-nav>ul>li.jp::before{
width: 22px;
height: 18px;
background-position: -25px -171px;
margin-top: -9px;
}
.banner .center-wrap .banner-nav>ul>li.as::before{
width: 22px;
height: 18px;
background-position: -28px -262px;
margin-top: -9px;
}
.banner .center-wrap .banner-nav>ul>li.eu::before{
width: 22px;
height: 18px;
background-position: -29px -351px;
margin-top: -9px;
}
.banner .center-wrap .banner-nav>ul>li.au::before{
width: 22px;
height: 18px;
background-position: -28px -305px;
margin-top: -9px;
}
.banner .center-wrap .banner-nav>ul>li>dl{
position: absolute;
height: 48px;
top: 50%;
left: 42px;
margin-top: -24px;
color: white;
}
.banner .center-wrap .banner-nav>ul>li>dl dt{
font-size: 18px;
line-height: 26px;
}
.banner .center-wrap .banner-nav>ul>li>dl dd{
font-size: 14px;
line-height: 22px;
}
.banner .banner-nav .menus-box .menu{
position: absolute;
left: 296px;
top: 0;
width: 356px;
height: 100%;
background-color: red;
padding: 16px;
box-sizing: border-box;
}
.banner .center-wrap .banner-nav .menus-box .menu dl{
padding-bottom: 16px;
}
.banner .banner-nav .menus-box .menu dl dt{
font-size: 16px;
line-height: 30px;
}
.banner .banner-nav .menus-box .menu dl dd{
font-size: 14px;
line-height: 22px;
}
1回答
-
好帮手慕慕子
2021-10-18
同学你好，因为html结构中直接使用一个dl包裹所有的内容，为了方便截图，老师将部分代码折叠起来了，如下：
所以给dl设置的padding-bottom属性并不能调整dt与前面元素之间的空白间距，导致同学误以为设置的padding-bottom属性没有生效。
建议修改：可以使用不同的dl分别包裹dt和dd，如下：
祝学习愉快~
0
相似问题