Question

我有一个无序的垂直列表作为导航栏，正在移动设备上更改为水平列表。如何防止列表切换到垂直列表并在其中包含的div元素中保持水平。

侧面说明：生成的代码段将列表显示为垂直，但是我怀疑是因为给定宽度，该窗口被视为可移动窗口

编辑：在移动设备的屏幕右侧似乎也有一个小的可滚动间隙。

body {
    background-color: #E5E5E5;
}

#nav_bar {
    background-color: #2F2F2F;
    height: 60px;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
}

#nav_logo {
    background-image: url('../img/nav_logo.png');
    width: 250px;
    height: 40px;
    top: 15%;
    left: 10%;
    position: absolute;
}

@media (max-width: 629px) {
    div#nav_logo {
      background-image: url('../img/nav_logo_mobile.png');
      width: 60px;
      height: 39px;
    }
}

ul.nav {
    list-style-type: none;
    left: 70%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: absolute;
}

li.nav {
    float: left;
}

li.nav a {
    font-family: 'Roboto Condensed', sans-serif;
    display: block;
    color: white;
    text-align: center;
    padding: 18px;
    text-decoration: none;
}

li.nav a:hover {
    text-decoration: underline;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title></title>

    <link rel="stylesheet" href="css/style.css" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed|Oswald|PT+Sans" rel="stylesheet">


  </head>

  <body>

    <div id="nav_bar">

      <div id="nav_logo"></div>

      <ul class="nav">
        <li class="nav"><a href="index.html">HOME</a></li>
        <li class="nav"><a href="contact.html">CONTACT</a></li>
        <li class="nav"><a href="about.html">ABOUT</a></li>
      </ul>

    </div>
  </body>
</html>

Answer 1

我认为问题出在“左：70％”。在移动设备上，空间不足以使链接保持一致。

在小屏幕上给它们更多的空间。我建议设置正确的值，而不是左，顺便说一句。在小屏幕上，您可以将其设置为右侧：0。

Answer 2

我在w3schools上找到了一些代码，并试图在您的代码中实现它。这是我想出的：

ul.nav {
  position: relative;
  overflow: hidden;
  background-color: #333;
}

li.nav {
    float: left;
}

li.nav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

在移动设备上无序水平列表切换为垂直列表

2 个答案: