关于小慕医生header中出现的相关的问题
图片中圈出的部分，下边距总是超出父辈盒子的，除了用相对定位解决，还用什么方法解决比较好。
header部分的相关代码
相关代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport"> <meta content="ie=edge" http-equiv="X-UA-Compatible"> <title>小慕医生02</title> <link href="css/css.css" rel="stylesheet"> </head> <body> <header> <!--头部，logo，电话，搜索框--> <div class="header-top"> <!--logo--> <div class="logo"> <h1>小慕医生</h1> </div> <!--电话，中英文--> <div class="header-top-right"> <div class="telephone"> <img alt="" class="tel" src="images/tel.png"/> <span>088-88888888</span> <a href=""><img alt="" class="icon" src="images/chinese_icon.png"/></a> <a href=""><img alt="" class="icon" src="images/english_icon.png"/></a> </div> <!--搜索框--> <div class="search"> <input type="text" placeholder="找医生/科室"/> <button><img src="images/search.png" alt=""></button> </div> </div> </div> <!--导航栏--> <div class="nav"> <!--用无序列表定义每个导航栏--> <ul> <li>首页</li> <li>医院概况</li> <li>医院动态</li> <li>专家学科</li> <li>服务指南</li> <li>医院文化</li> <li>信息公开</li> <li>互动交流</li> </ul> </div> </header> <!--责任、可约、严谨这个贯穿横向的大图片--> <div class="banner"> <!--图片--> <img alt="" src=""/> <!--责任、科学、严谨三个字--> <div class="science"></div> </div> <!--content,开始是文字的内容--> <div class="content"> <!--内容top--> <div class="content-top"> <ul> <li> <img alt="" src=""/> <span>就诊须知</span> </li> <li> <img alt="" src=""/> <span>就医流程</span> </li> <li> <img alt="" src=""/> <span>专家介绍</span> </li> <li> <img alt="" src=""/> <span>科室介绍</span> </li> <li> <img alt="" src=""/> <span>医保就医</span> </li> <li> <img alt="" src=""/> <span>健康体检</span> </li> </ul> </div> <!--新闻动态，新闻--> <div class="news"> <h3>医院动态</h3> <!--医院的动态图片--> <img alt="" src=""/> </div> <!--内容的部分--> <div class="content-info"> <ul> <li>年度医疗机构用血自查评分表和科室基本信息表</li> <li>关于上报北京市医疗机构临床用血信息的通知</li> <li>北京医院输血科通过验收并获批开展“临床基…</li> <li>关于将多拉司琼注射剂等药品纳入本市基本医…</li> <li>关于将多拉司琼注射剂等药品纳入本市基本医…</li> <li>关于调整完善本市基本医疗保险门诊特殊疾病…</li> <li>广东省药学会：关于印发《超药品说明书用药…</li> <li>人力资源社会保障部关于将36种药品纳入国家…</li> </ul> </div> <!--医院报导--> <div class="notice"> <h3>医院公告</h3> <!--各类的公告--> <ul> <li> <div class="number"></div> <dl> <dt>《养生堂》</dt> <dd>公郭立新主任 特殊时期糖尿病人的新冠…</dd> </dl> </li> <li> <div class="number"></div> <dl> <dt>《养生堂》</dt> <dd>王少为主任 新型冠状病毒防控指引十八…</dd> </dl> </li> <li> <div class="number"></div> <dl> <dt>《我要当医生》</dt> <dd>谭玲副主任 李同舟 姚晨蕊药师</dd> </dl> </li> <li> <div class="number"></div> <dl> <dt>《全民健康学院》</dt> <dd>王建业院长 “医”路有你 健康同行</dd> </dl> </li> <li> <div class="number"></div> <dl> <dt>《健康北京》</dt> <dd>王建业院长 莫把衰老当病治</dd> </dl> </li> </ul> </div> <!--居中的宣传图片--> <div class="diss-picture"></div> <!--科室介绍--> <div class="department"> <h3>科室介绍</h3> <!--内科--> <div class="nei-ke"> <h4>内科</h4> <ul> <li>呼吸内科</li> <li>消化内科</li> <li>神经内科</li> <li>心血管内科</li> <li>肾内科</li> <li>血液内科</li> <li>免疫科</li> <li>内分泌科</li> </ul> </div> <!--肿瘤科--> <div class="tumour-ke"> <h4>肿瘤科</h4> <ul> <li>肿瘤内科</li> <li>肿瘤外科</li> <li>肿瘤妇科</li> <li>骨肿瘤科</li> <li>放疗科</li> <li>肿瘤康复科</li> <li>肿瘤复合科</li> </ul> </div> <!--外科--> <div class="wai-ke"> <ul> <li>普通外科</li> <li>神经外科</li> <li>心胸外科</li> <li>泌尿外科</li> <li>肝胆外科</li> <li>肝肠外科</li> <li>心血管外科</li> <li>烧伤科</li> <li>骨外科</li> <li>乳腺外科</li> </ul> </div> <!--儿科--> <div class="er-ke"> <ul> <li>儿科综合</li> <li>小儿内科</li> <li>小儿外科</li> <li>新生儿科</li> <li>儿童营养科</li> <li>消化内科</li> </ul> </div> <!--科室介绍结束--> </div> </div> <!--专家介绍--> <div class="expert"> <h3>专家介绍</h3> <!--六个大盒子，ul--> <ul class="introduce"> <!--姓名：李琳--> <li> <div class="exp-photo"> <img alt="" src=""/> </div> <ul> <li>姓名：李琳</li> <li>科室：肿瘤内科</li> <li>职称：主任医师</li> <li>介绍：北京医院肿瘤内科科室主任，党支部书记，副教授，硕士研究生导师，中国老年肿瘤专业委员会肺癌分委会常务委员，北京医学……</li> </ul> </li> <!--姓名：毛永辉--> <li> <div class="exp-photo"> <img alt="" src=""/> </div> <ul> <li>姓名：毛永辉</li> <li>科室：肾脏内科</li> <li>职称：主任医师</li> <li>介绍：北京医院肾内科主任，主任医师，硕士研究生导师。1989年毕业于华西医科大学临床医学院，后在北京医院内科、肾内科工作……</li> </ul> </li> <!--姓名：黄慈波--> <li> <div class="exp-photo"> <img alt="" src=""/> </div> <ul> <li>姓名：黄慈波</li> <li>科室：风湿免疫科</li> <li>职称：主任医师</li> <li>介绍：教授主任医师研究生导师卫生部北京医院风湿免疫科主任，北京大学医学部风湿免疫系副主任；海峡两岸医师交流协会风湿免疫……</li> </ul> </li> <!--姓名：曹素艳--> <li> <div class="exp-photo"> <img alt="" src=""/> </div> <ul> <li>姓名：曹素艳</li> <li>科室：特需医疗部</li> <li>职称：主任医师</li> <li>介绍：北京医院特需医疗部（健康管理中心）/全科医疗部主任，老年与全科医学中心副主任，主任医师，医学硕士。北京大学医学部硕士……</li> </ul> </li> <!--姓名：陈海波--> <li> <div class="exp-photo"> <img alt="" src=""/> </div> <ul> <li>姓名：陈海波</li> <li>科室：神经内科</li> <li>职称：主任医师</li> <li>介绍：北京医院神经内科主任，主任医师，北京大学医学部神经病学系副主任、教授。中国医师协会神经内科医师分会副会长兼帕金……</li> </ul> </li> <!--姓名：Jack--> <li> <div class="exp-photo"> <img alt="" src=""/> </div> <ul> <li>姓名：Jack</li> <li>科室：普通外科</li> <li>职称：主任医师</li> <li>介绍：北京医院普通外科主任，胃肠外科主任，北京大学医学部硕士研究生导师，1985年毕业于白求恩医科大学，从事普外科临床工……</li> </ul> </li> </ul> <!--六位专家介绍到此结束--> </div> <!--底部的介绍--> <div class="footer"> <!--友情链接部分--> <div class="friend"> <h2>友情链接</h2> <!--相关的链接--> <ul> <li>院长信箱</li> <li>投诉信箱</li> <li>在线调查</li> <li>地理位置</li> <li>网站地图</li> <li>网站帮助</li> <li>隐私声明</li> </ul> </div> <!--小慕医生--> <div class="xm-doctor"> <h2>小慕医生</h2> <!--相关的链接--> <ul> <li>地址：北理工国防大厦111号</li> <li>电话：088-88888888</li> <li>邮箱：kefu@imooc.com</li> <li>邮编：666666</li> <li>网址：https://imooc.com</li> <li>举报热线：088-88888888</li> </ul> </div> <!--底部的内容到此结束--> </div> </body> </html>
header中css相关代码
相关代码：
/*清除全局*/
* {
margin: 0;
padding: 0;
}
/*设置body的字体大小*/
body {
font-size: 14px;
}
/*a标签不带有下划线*/
a {
text-decoration: none;
/*设置为行内块*/
display: inline-block;
/*background-color: red;*/
}
/*无序列表ul清除所有的前缀圆点*/
ul {
list-style: none;
}
/*header-top的布局*/
header .header-top {
width: 1200px;
background-color: yellow;
margin: 0 auto;
/*清除浮动，超出溢出，BFC*/
overflow: hidden;
}
/*logo位置的设置*/
header .header-top .logo {
float: left;
width: 221px;
height: 63px;
/*background-color: red;*/
/*设置上下边距*/
padding-top: 39px;
padding-bottom: 29px;
}
/*logo内容设置h1*/
header .header-top .logo h1 {
width: 221px;
height: 63px;
/*background-color: orange;*/
/*文字的内容进行设置*/
font-size: 48px;
line-height: 58px;
/*让文字小时但是还是可以搜索到,用首行缩进*/
text-indent: -999em;
/*插入背景图片*/
background-image: url("../images/logo.png");
}
/*电话、中英文、搜索框*/
header .header-top .header-top-right {
float: right;
width: 266px;
height: 95px;
background-color: green;
/*设置内边距，先确定两个区域的位置*/
padding-top: 36px;
/*下边距先别设置，可以踹下来*/
}
/*电话部分的位置*/
header .header-top .header-top-right .telephone {
height: 26px;
background-color: orange;
margin-bottom: 12px;
}
/*电话图片大小的设置*/
header .header-top .header-top-right .telephone .tel {
width: 32px;
height: 25px;
}
/*中英文文字图标*/
header .header-top .header-top-right .telephone a .icon {
width: 24px;
height: 24px;
}
/*电话文字的设置*/
header .header-top .header-top-right .telephone span {
display: inline-block;
width: 158px;
height: 26px;
background-color: #fff;
text-align: center;
font-size: 20px;
line-height: 24px;
color: #00978E;
}
/*搜索框的部分*/
header .header-top .header-top-right .search {
height: 30px;
/*background-color: blue;*/
border: 1px solid #e5e1e1;
}
/*搜索框设置*/
header .header-top .header-top-right .search input {
width: 213px;
height: 28px;
border: none;
padding-left: 20px;
font-size: 16px;
line-height: 18px;
outline: none;
}
/*搜索按钮设置*/
header .header-top .header-top-right .search button {
display: inline-block;
width: 24px;
height: 30px;
/*background-color: red;*/
}
header .header-top .header-top-right .search button img {
width: 24px;
height: 24px;
margin: 0 auto;
}16
收起
正在回答 回答被采纳积分+1
2回答
imooc_慕慕
2022-05-30 16:18:01
同学你好，第一个问题，父元素的高度不够，给父元素增加高度，参考如下图;
span标签给个padding-top使其高度撑开，参考如下图：
第二个问题：box-sizing:border-box；是边框和内边距都包含在width里，这样不会被挤到下一行，参考如下图：
祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星