慕家居界面 header部分右侧的搜索框，在网页整体缩小的时候下边框会不见

# 具体遇到的问题
慕家居界面 header部分右侧的搜索框，在网页整体缩小的时候下边框会不见。

而且整个搜索框会掉下来；为什么其他内容缩小不会掉下来呢？这种问题要怎么解决呢？
# 报错信息的截图
# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

 <header class="mjj"> <div class="center-wrap clearfix">   <div class="logo"> <h1>慕家居</h1> <img src="images/logo.png" alt="慕家居"> </div>   <ul class="clearfix"> <li> <a href=""> <div class="box-border"> <div class="web-home icon"></div> </div> <span class="db">网站首页 </a> </li> <li> <a href=""> <div class="box-border"> <div class="about-us-top icon"></div> </div> <span class="db">关于我们 </a> </li> <li> <a href=""> <div class="box-border"> <div class="ser-pro icon"></div> </div> <span class="db">服务建设 </a> </li> <li> <a href=""> <div class="box-border"> <div class="pro-center icon"></div> </div> <span class="db">产品中心 </a> </li> <li> <a href=""> <div class="box-border"> <div class="service-hall icon"></div> </div> <span class="db">服务大厅 </a> </li> </ul>   <div class="search clearfix"> <input type="text" placeholder="请输入搜索内容"> <div class="icon"></div> </div> </div> </header> 

css 部分

/* header 区域 */ .mjj {  width: 100%;  height: 121px;  padding: 19px 0 0 11px; box-sizing: border-box;  min-width: 1201px; } /*header logo区 */ /* 左侧logo文字：字体颜色为#0058AA，鼠标移入时变成小手状。 */ .mjj .center-wrap .logo {  width: 192px;  height: 91px;  float: left;  cursor: pointer;  margin-right: 109.1px;  position: relative; } .mjj .center-wrap .logo h1 { 

/* float: left;<br>  font-size: 64px;<br>  color: #0058AA;<br>  line-height: 91px;<br>  margin-right: 109.1px;<br>  cursor: pointer; */

  position: absolute;  z-index: -99;  color: transparent;; } .mjj .center-wrap .logo img {  width: 192px;  position: absolute;  z-index: 99; } /*header 短链接区 */ .mjj .center-wrap ul {  float: left;  width: 560px;  margin-right: 62px; } .mjj .center-wrap ul>li {  float: left;  width: 64px;  height: 91px;  margin-right: 60px;  font-size: 16px;  position: relative; } .mjj .center-wrap ul>li:last-child {  margin-right: 0; } .mjj .center-wrap ul>li a {  color: #545454; } .mjj .center-wrap ul>li a .icon {  width: 33px;  height: 33px;  background-image: url(../images/css-icon.png);  position: absolute;  top: 50%;  margin-left: 50%; transform: translateX(-50%) translateY(-50%); } .mjj .center-wrap ul>li a .box-border{  width: 50px;  height: 50px;  position: relative;  top:3px;  margin-left: 50%; transform: translateX(-50%);  background-color: transparent; box-sizing: border-box; border-radius: 50%; } /* 短链接部分动画效果 */ /* 鼠标移入导航图标时，背景色变为#0058AA且有呼吸动画效果 */ .mjj .center-wrap ul>li a .box-border:hover {  background-color: #0058AA;  top:3px;  margin-left: 50%; animation: small-big 0.5s ease 0s infinite alternate; } @keyframes small-big { from { transform:translateX(-50%) scale(1.0); } to { transform:translateX(-50%) scale(1.1); } } .mjj .center-wrap ul>li a span {  margin-top: 20px; } /* 短链接部分动画效果 */ .mjj .center-wrap ul>li a .web-home {  background-position: -22px -23px; } .mjj .center-wrap ul>li a .box-border:hover .web-home {  background-position: -73px -20px; } .mjj .center-wrap ul>li a .about-us-top {  background-position: -21px -65px; } .mjj .center-wrap ul>li a .box-border:hover .about-us-top {  background-position: -71px -65px; } .mjj .center-wrap ul>li a .ser-pro {  background-position: -21px -107px; } .mjj .center-wrap ul>li a .box-border:hover .ser-pro {  background-position: -68px -107px; } .mjj .center-wrap ul>li a .pro-center {  background-position: -22px -146px; } .mjj .center-wrap ul>li a .box-border:hover .pro-center {  background-position: -69px -144px; } .mjj .center-wrap ul>li a .service-hall {  background-position: -21px -183px; } .mjj .center-wrap ul>li a .box-border:hover .service-hall {  background-position: -69px -180px; } /*header 搜索框 */ /* ）右侧搜索框：分输入框和搜索按钮两部分，鼠标移入搜索按钮时变成小手状 */ .mjj .center-wrap .search {  float: left;  height: 37px; box-sizing: border-box;  margin-top: 32px; } .mjj .center-wrap .search input {  outline: none;  font-size: 14px;  color:#545454;  line-height: 35px;  float: left;  width: 212px;  height: 35px;  border: 1px solid #D3D3D3; border-radius: 1px 0 0 1px;  padding-left: 15px; } .mjj .center-wrap .search .icon {  width: 48px;  height: 37px;  background-color: #0058AA;  background-image: url(../images/css-icon.png);  background-position:-129px -21px; border-radius: 0 1px 1px 0;  float:left;  cursor: pointer; }

在这里输入代码，可通过选择【代码语言】突出显示

大白T_T 2020-11-09

源自：“仿穷游”首页静态项目 5-2 项目作业

收起

4回答

大白T_T 提问者 2020-11-10 14:43:50

这个是重置页面和base 部分的css 

/*<br>YUI 3.18.1 (build f7e7bcb)<br>Copyright 2014 Yahoo! Inc. All rights reserved.<br>Licensed under the BSD License.<br>http://yuilibrary.com/license/<br>*/

 html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}a{text-decoration: none;}button{border: none;} body {  font-family: "微软雅黑"; } .center-wrap {  width: 1201px;  margin: 0 auto; } .clearfix {  overflow: hidden; } .db {  display: block; } .dib {  display: inline-block; } .tac {  text-align: center; } 

收起回答

好帮手慕鹤 #1

同学你好，老师测试了你的代码，因为回复中没有办法上传测试的效果图，请同学注意右上角小铃铛的通知；老师会以另外的方式帮你分析。祝学习愉快！

2020-11-10 15:54:11

好帮手慕鹤 2020-11-10 14:01:03

同学你好，老师这里测试的跟同学描述的有些差距，例如搜索框同学提供的宽度值是279px，但是老师这里显示的是277px，如下：

所以老师这里测不出来同学说的问题，建议同学把书写的所有代码包括重置浏览器样式的代码全部粘贴上来，老师再根据同学的代码查错并修改。

祝学习愉快。

收起回答

提问者大白T_T #1

所有代码太长了，上传不了。可以看的到我上传的这一节的作业吗？慕家居的作业我上传的会有我的这个问题

2020-11-10 14:42:15

好帮手慕鹤 2020-11-10 11:49:21

同学你好，老师这里测试给center-wrap设置固定的宽度，右侧搜索框不会被挤下来，如下：

建议同学把修改过的代码全部粘贴上来，老师再帮助你查找问题和修改哦。

右侧搜索框的底部边框是存在的，只是边框不是很明显，可以把页面放大查看效果哦，如下：

祝学习愉快！

收起回答

提问者大白T_T #1

上边 logo 宽度 192. margin-right 109.1 链接部分 560+62 搜索框 279 一共是 1202.1 。 center-wrap 设置成 1203 搜索框还是会掉下来。设置成 1027 就不会掉下来了。 border-bottom 缩小之后就看不到了，但是左右上还是能够很明显的看到

2020-11-10 11:59:41