为啥input跑出盒子了 怎么解决啊

Question

问题遇到的现象和发生背景

问题相关代码，请勿粘贴截图

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果

 <div class="daohang banxin">
        <div class="logo">
            <h1><a href="#">小兔鲜儿</a></h1>
        </div>
    
      <div class="nav">
       <ul>
           <li><a href="#">首页</a></li>
           <li><a href="#">首页</a></li>
           <li><a href="#">首页</a></li>
           <li><a href="#">首页</a></li>
           <li><a href="#">首页</a></li>
           <li><a href="#">首页</a></li>
           <li><a href="#">首页</a></li>
           <li><a href="#">首页</a></li>
       </ul>
       </div>
       <div class="sousuo">
           <input type="text" placeholder="搜索">
           <span></span>
        </div>
       <div class="gouwuche"></div>
    </div>
</body>
</html>

.nav{
    float: left;
    margin-left: 70px;
    height: 70px;
   
}
.nav li{
    float: left;
    margin-right: 40px;
    line-height: 70px;
}
.nav li a{
    display: block;
   
    font-size: 20px;
    color: #000;
}
.nav li a:hover{
    color: rgb(39, 187, 154);
    border-bottom: 1px solid rgba(39, 187, 154);
}
.sousuo {
    float: left;
    margin-top: 24px;
    margin-left: 34px;
    width: 172px;
    height: 30px;
    border-bottom: 2px solid rgb(206, 203, 203);
}
.sousuo input {
    padding-left: 30px;
    width: 172px;
    height: 28px;
}
.sousuo input::placeholder{
    font-size: 14px;
    color: rgb(195, 189, 189);
}

Answer 1

可能是这里的问题，你的li的行高70，input的行高只有30，它向下靠齐，就偏下了，试试margin-top多减一点，过着增加margin-bottom