1

blogger 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 -->
4

2 回答 2

1

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

在此处输入图像描述

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

.header-wrap ul { overflow: visible !important }
于 2018-12-19T18:17:17.010 回答
1

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

只需在headerwrap.

<div id="header-wrap"> ... </div>
<!-- This clearfix used for clearing floats between elements -->
<div class="clearfix"></div>
于 2018-12-19T19:50:36.067 回答