Неупорядоченный горизонтальный список переключения на вертикальный на мобильном - PullRequest
Новая
       11

Неупорядоченный горизонтальный список переключения на вертикальный на мобильном

0 голосов
/ 13 октября 2018

У меня есть неупорядоченный вертикальный список в виде панели навигации, который на мобильных устройствах меняется на горизонтальный список.Как предотвратить переключение списка в вертикальное положение и оставаться в горизонтальном положении внутри элемента 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>

Ответы [ 2 ]

0 голосов
/ 13 октября 2018

Я думаю, что проблема с «слева: 70%».На мобильных устройствах места просто недостаточно, чтобы держать ссылки в одной строке.

Дайте им больше места на маленьких экранах.Я бы порекомендовал установить правильное значение вместо левого, кстати.На маленьких экранах вы можете просто установить его вправо: 0.

0 голосов
/ 13 октября 2018

Я нашел некоторый код в 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;
}
...