老师看看边框出什么问题了

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

width: 24px;

height: 24px;

}

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

margin-right: 15px;

}

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;

width: 244px;

height: 28px;

border: none;

padding-left: 20px;

outline: none;

}

header .header-top .tool .r2 button{

float: left;

width: 20px;

height: 20px;

/* 背景去掉 */

background: none;

/* 边框去掉 */

border: none;

/* 去掉鼠标点击时候的蓝色框 */

outline: none;

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

cursor: pointer;

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

position: relative;

top: 4px;

right: 4px;

}

慕勒5842832 2021-10-10

源自：浮动与定位 4-2 小慕医生项目开发（2）

收起

1回答

好帮手慕然然 2021-10-10 14:27:23

同学你好，代码粘贴的不太完整，老师无法准确定位问题，建议同学使用开发者工具检查一下是否是.tool盒子的位置设置的不合理，超出了外层盒子，或者是父盒子宽度不够，将搜索框右侧给隐藏了。

如果还是不行的话，建议同学将header部分的全部css代码以及html代码粘贴上来，老师测试一下。

祝学习愉快！

收起回答

提问者慕勒5842832 #1

*{
    margin: 0;
    padding: 0;
}
ul,ol{
    list-style:none;
}
a{
    text-decoration: none;
}
/* 字体 */
body{
    font: normal 14px/25px '微软雅黑';
}
/* 头部 */
header{

}
header .header-top{
    width: 1201px;
    margin: 0 auto;
    /* 清楚浮动 */
    overflow:hidden;
}
header .header-top .logo{
    padding-top:27px;
    width: 221px;
    height: 63px;
    float: left;

}
header .header-top .logo h1{
    width:221px;
    height:63px;

}
header .header-top .tool{
    float: right;
    width: 266px;
    height: 77px;
    padding-top: 22px;
}
header .header-top .tool .r1{
    margin-bottom: 14px;
}
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: 15px;
}
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;
    width: 244px;
    height: 28px;
    border: none;
    padding-left: 20px;
    outline: none;
}
header .header-top .tool .r2 button{
    float: left;
    width: 20px;
    height: 20px;
    /* 背景去掉 */
    background: none;
    /* 边框去掉 */
    border: none;
    /* 去掉鼠标点击时候的蓝色框 */
    outline: none;
    /* 设置触碰时候的鼠标指针的样式 */
    cursor: pointer;
/* 相对定位来微调位置 */
position: relative;
top: 4px;
right: 4px;
}

2021-10-10 14:30:26
提问者慕勒5842832 #2

<body>
    
<header>

    <div class="header-top">

    
<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"></a>
    <a href=""><img class="english-icon" icon src="images/english_icon.png"></a>
    </div>
    <div class="r2">
        <input type="text" placeholder="找医生/找科室">
        <button><img src="images/search.png" alt=""></button>
    </div>
    </div>
</div>

2021-10-10 14:31:38
提问者慕勒5842832 #3

这样可以吗

2021-10-10 14:32:19