关于CSS自适应问题PC正常居中，移动端铺不满而且宽度还溢出

关于CSS自适应问题
PC正常居中，移动端铺不满而且宽度还溢出

<div class="search-input">
          <input class="ml_input"> 
          <button class="search-btn">搜索</button> 
          </div>

<style>
    .search-input {
    height: 45px;
    width: 600px;
    margin: 0 auto;
    margin-top: 10px;
    position: relative;
}
.ml_input {
    border: 1px solid #077ee3;
    box-sizing: border-box;
    width: 500px;
    height: 45px;
    font-size: 18px;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
}
@media (max-width: 767px){
    .ml_input{
        border: 1px solid #077ee3;
    box-sizing: border-box;
    width:50%;
    height: 45px;
    font-size: 18px;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
    }
}

.search-btn {
    height: 45px;
    width: 100px;
    border: 1px solid #287ae4;
    background-color: #287ae4;
    color: white;
    font-size: 16px;
    font-weight: bold;
    float: left;
}
.search-btn {
    cursor: pointer
}
.search-select {
    position: absolute;
    top: 45px;
    width: 500px;
    box-sizing: border-box;
    z-index: 999;
}
.search-select li {
    border: 1px solid #d4d4d4;
    ;
    border-top: none;
    border-bottom: none;
    background-color: #fff;
    width: 100%
}
.search-select-option {
    box-sizing: border-box;
    padding: 7px 10px;
}
.selectback {
    background-color: #eee !important;
    cursor: pointer
}
input::-ms-clear {
    display: none
}
.search-reset {
    width: 21px;
    height: 21px;
    position: absolute;
    display: block;
    line-height: 21px;
    text-align: center;
    cursor: pointer;
    font-size: 20px;
    right: 110px;
    top: 12px
}
.search-select-list {
    transition: all 0.5s
}
.itemfade-enter,
.itemfade-leave-active {
    opacity: 0;
}
.itemfade-leave-active {
    position: absolute;
}
.selectback {
    background-color: #eee !important;
    cursor: pointer
}
.search-select ul{margin:0;text-align: left; }

.selectback{background-color: #eee !important;cursor: pointer}

    </style>

你的样式里，只做了一种适配，移动端的宽度各种各样的，建议使用 flex 弹性布局

• 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/163316
• 这篇博客你也可以参考下：CSS 移动端PC端背景图全屏满屏显示
• 除此之外, 这篇博客: 前端如何优雅的实现跨终端开发（PC端+移动端）中的 解决方案一：使用CSS媒体查询。 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 这是传统的解决方案。使用一套代码，先做PC端，再根据视口调节移动端样式。
  伪代码：

  @media screen and (max-width:992px){...}
  @media screen and (max-width:1400px){...}
  

  弊端：PC端 和 Mobile端 的界面交互体验不同，页面的布局也不同。仅仅依靠 CSS媒体查询，只是让 PC端 的页面在 Mobile端 可用，远远达不到原生 Mobile端 的效果。比较僵硬的展现在移动端。

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632