在移动设备上切换到垂直的无序列表答案

【问题标题】：Unordered horizontal list switching to vertical on mobile在移动设备上切换到垂直的无序列表
【发布时间】：2018-10-13 17:39:41
【问题描述】：

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

旁注：生成的代码 sn-p 将列表显示为垂直，但我怀疑这是因为窗口被认为是移动的，因为它的宽度

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

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>

【问题讨论】：

标签： html css list html-lists

【解决方案1】：

我认为问题在于“左：70%”。在移动设备上，空间不足以将链接保持在一条线上。

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

【讨论】：

谢谢，这是解决方法，就像将“left: 70%”更改为“right: 0”一样简单。

【解决方案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;
}

【讨论】：