<header>

        <div class="header-top">

            <!-- 网页的logo -->

            <div class="logo">

                <h1>小慕医生</h1>

            </div>

             <!-- 网页的功能区 -->

            <div class="tool">

                <div class="r1">

                    <img class="tel" src="images/tel.png" alt="">

                    <span class="telnumber">088-88888888</span>

                    <a href=""> <img class="chinese_icon icon" src="images/chinese_icon.png" alt=""></a>

                    <a href=""><img class="english_icon icon" src="images/english_icon.png" alt=""></a>

                </div>

                <div class="r2">

                    <input type="text"/ placeholder="找医生/科室..">

                    <button><img src="images/search.png" alt=""></button>

                </div>

            </div>

        </div>

        <!-- 网页的导航条 -->

        <nav class="main-nav">

            <ul>

                <li class="first">首页</li>

                <li>医院概况</li>

                <li>医院动态</li>

                <li>专家学科</li>

                <li>服务指南</li>

                <li>医院文化</li>

                <li>信息公开</li>

                <li>互动交流</li>

            </ul>

        </nav>

    </header>

.header-top::after{

    content: '';

    clear: both;

    display: block;

}

header .header-top{

    width: 1199px;

    margin: 0 auto;

}

header .header-top .logo{

    padding-top: 39px;

    width: 192px;

    height: 63px;

    float: left;

}

header .header-top .logo h1{

    width: 192px;

    height: 63px;

}

header .header-top .tool{

    width: 266px;

    height: 67px;

    float: right;

    padding-top: 32px;

}

header .header-top .tool .r1{

    margin-bottom: 10px;

}

header .header-top .tool .r1 .tel{

    width: 32px;

    height: 25px;

}

header .header-top .tool .r1 .telnumber{

    font-size: 20px;

    color: #00978E;

    display: inline-block;

    width: 158px;

    height: 26px;

    text-align: center;

}

header .header-top .tool .r1 .icon{

    width: 24px;

    height: 24px;   

}

header .header-top .tool .r1 .chinese_icon{

    margin-right: 16px;

}

header .header-top .tool .r2{

    width: 264px;

    height: 28px;

    border: 1px solid rgba(202,202,202,.6);

}

header .header-top .tool .r2 input{

    float: left;

    /* 去掉边框线 */

    border: none;

    width: 224px;

    height: 28px;

    font-size: 16px;

    padding-left: 20px;

    /* 去掉鼠标点击时的蓝色外围线 */

    outline:none;

}

header .header-top .tool .r2 button{

    float: right;

    width: 20px;

    height: 20px;

    /* 去掉背景 */

    background: none;

    /* 去掉边框 */

    border: none;

     /* 去掉鼠标点击时的蓝色外围线 */

     outline: none;

     /* 设置触碰时候的鼠标指针的样式 */

     cursor: pointer;

     /* 相对定位来微调位置 */

     position: relative;

     top:4px;

     right: 4px;

}

header .main-nav{

    /* 这里不用写宽度，直接贯穿屏幕 只写高度 */

    height:60px ;

    background-color: #00978E;

    margin-top: 29px;

}

header .main-nav ul{

    width: 1200px;

    height: 60px;

    margin: 0 auto;

}

header .main-nav ul li{

    float: left;

    width: 150px;

    height: 60px;

    text-align: center;

    line-height: 60px;

    color: white;

    cursor: pointer;

}

header .main-nav ul li.first{

    background-color: #015E58;

}

1 为什么不设置宽度 没有贯穿 反而拖动滚动条 会出现空白 没有全部填充满