Question

在我的页面http://jerrittpace.com/aboutme.html上，菜单栏没有像网站上的其他页面一样在手机上内联显示，并且我无法弄清楚问题出在哪里。感谢您的帮助！

我已经尝试将菜单栏周围的所有div容器的css更改为内联，但是没有任何作用。

<div class="left">
          <div class="LINKS">
            <p> <a href="home.html">HOME</a></p>
            <p><a href="aboutme.html">ABOUT ME</a></p>
            <p><a href="gallery.html">GALLERY</a></p>
            <p><a href="contactme.html">CONTACT ME</a></p>
          </div>
    </div>

那么CSS是

.LINKS {
    color: #FFFFFF;
    text-shadow: -1px -1px;
    background-repeat: no-repeat;
    -webkit-box-shadow: 0px 0px 0px 0;
    box-shadow: 0px 0px 0px 0;
    background-position: 16% 2%;
    bottom: 0px;
    font-weight: bold;
    font-variant: normal;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding-top: 0px;
    padding-bottom: 0px;
    top: 0px;
    font-size: xx-large;
    display: inline;
}

我希望菜单栏在手机上显示时是嵌入式的，就像网站上的其他页面一样。

Answer 1

如果您仍然需要嵌入式菜单，请尝试滚动浏览移动设备。

示例： HTML

<ul class='nav'>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Me</a></li>
      <li><a href="#">Downloads</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
</ul>

CSS

ul.nav {
  padding: 0;
  margin: 0;

  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;

  font-size: 0; /* to remove extra line space of inline-block */

}
ul.nav li {
  padding: 12px 16px 13px;
  font-size: 14px;
}
ul.nav li a{
  color: #64cce3;
  text-decoration: none;
}
ul.nav li:not(:last-child) {
  border-right: 1px solid rgba(114, 124, 135, 0.2);
}
ul.nav li {
  display: inline-block;
  vertical-align: middle;
}
ul.nav::-webkit-scrollbar {
  display: none;
}

Live Example

为什么我的菜单不在手机中内联，但可以在笔记本电脑中正常工作

1 个答案: