博客菜单未显示在移动屏幕上

Question

blogger 博客的菜单在手机上不显示，在手机上显示时会产生许多空白白线。但它在电脑屏幕上正常工作。代码有什么问题？

这是博客链接：My Blog

菜单 = 主页 |联系我们 |关于我们 | پاکستان | .....

主题菜单代码：

<!-- main menu -->
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

.active {
  background-color: red;
}
</style>



<ul>
  <li><a class='active' href='https://www.dailylekhaari.com'>Home</a> </li>
  <li><a href='https://www.dailylekhaari.com/p/contact-us.html'>Contact Us</a></li>
  <li><a href='https://www.dailylekhaari.com/p/about.html'>About Us</a></li>

  <li><h1 style='     padding: 14px 16px;     padding-top: 14px;     padding-right: 16px;     padding-bottom: 0px;     padding-left: 16px; '><font color='white'>*   </font></h1></li>
<li><a href='https://www.dailylekhaari.com/search/label/%D9%BE%D8%A7%DA%A9%D8%B3%D8%AA%D8%A7%D9%86'>پاکستان</a></li>
<li><a href='https://www.dailylekhaari.com/search/label/%D8%A8%DB%8C%D9%86%20%D8%A7%D9%84%D8%A7%D9%82%D9%88%D8%A7%D9%85%DB%8C'>بین الاقوامی</a></li>
<li><a href='https://www.dailylekhaari.com/search/label/%D8%A7%D8%B3%D9%84%D8%A7%D9%85'>اسلام </a></li>
<li><a href='https://www.dailylekhaari.com/search/label/%D8%B3%D8%A7%D8%A6%D9%86%D8%B3%20%D9%88%20%D9%B9%DB%8C%DA%A9%D9%86%D8%A7%D9%84%D9%88%D8%AC%DB%8C'>سائنس ٹیکنالوجی</a></li>
<li><a href='https://www.dailylekhaari.com/search/label/%DA%A9%DA%BE%DB%8C%D9%84'>کھیل</a></li>
<li><a href='https://www.dailylekhaari.com/search/label/%DA%A9%D8%A7%D9%84%D9%85%D8%B2'>کالمز</a></li>
<li><a href='https://www.dailylekhaari.com/search/label/%D8%B3%DB%8C%D8%A7%D8%B3%D8%AA'>سیاست</a></li>

</ul>



<!-- main menu end -->

Answer 1

这是因为你没有指定浮点数或者只是你可以使用 clearfix hack。

只需在headerwrap 之后添加 Clearfix。

<div id="header-wrap"> ... </div>
<!-- This clearfix used for clearing floats between elements -->
<div class="clearfix"></div>

Answer 2

只需删除 HTML cmets，删除 <!-- hamara main menu 和 hamara main menu end -->

要在移动设备上显示菜单，请将其添加到 CSS

.header-wrap ul { overflow: visible !important }