Блог

Главная - Вопросы по программированию - Панель навигации добавляет ненужную строку при изменении размера

Панель навигации добавляет ненужную строку при изменении размера

#html #css #html-lists #navbar

#HTML #css #html-списки #панель навигации

Вопрос:

Я создаю сайт с панелью навигации, но когда я изменяю размер страницы, иногда одна ссылка переходит в дополнительную строку, например: Пример панели навигации

Как я могу это исправить? Вот мой код:

 body {
    margin: 0;
    background-color: white;
}

div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding-left: 0px;
    padding-right: 0px;
    overflow: hidden;
    background-color: #F27930;
    box-shadow: 5px 0px 0px 0px 5px lightgrey;
}

li {
    float: left;
    font-family: roboto;
    color: white;
}

li a.link {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 14px;
    text-decoration: none;
}

li a.current {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.divider {
    display: block;
    top: 50%;
    font-size: 25px;
    color: #FCD031;
    text-align: center;
    padding: 8px 2px;
    text-decoration: none;
}

li a:hover {
    background-color: #feae02;
}

li a.current:hover {
    background-color: #F27930;
}

li a.divider:hover {
    background-color: #F27930;
}  
 <link href="https://fonts.googleapis.com/css2?family=Robotoamp;display=swap" rel="stylesheet">

<div class="sticky">
    <ul>
        <li><a class="current"><b>Jump to Article:</b></a></li>
        <!-- <hr class="hrNav"> -->
        <li><a class="link" href="#top">Top</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article1">Article 1</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article2">Article 2</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article3">Article 3</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article4">Article 4</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article5">Article 5</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article6">Article 6</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article7">Article 7</a></li>
    </ul>
</div>

Любая помощь будет высоко оценена!

Спасибо, Джаспер

Комментарии:

1. В каком браузере вы тестировали?

2. Firefox и Chrome

Ответ №1:

Единственный способ избежать переноса слов на панели навигации — установить минимальную ширину панели навигации или добавить медиа-запрос, чтобы изменить его, когда экран слишком мал.

Использование атрибута CSS минимальной ширины.

 <!DOCTYPE html>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width-device-width, initial-scale-1.0">
  <title>Navbar Example</title>
  <link href="https://fonts.googleapis.com/css2?family=Robotoamp;display=swap" rel="stylesheet">
  <style>
    body {
      margin: 0;
      background-color: white;
    }
    
    div.sticky {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
    }
    
    ul {
      list-style-type: none;
      margin: 0;
      padding-left: 0px;
      padding-right: 0px;
      overflow: hidden;
      background-color: #F27930;
      box-shadow: 5px 0px 0px 0px 5px lightgrey;
    }
    
    li {
      float: left;
      font-family: roboto;
      color: white;
    }
    
    li a.link {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 14px;
      text-decoration: none;
    }
    
    li a.current {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    
    .divider {
      display: block;
      top: 50%;
      font-size: 25px;
      color: #FCD031;
      text-align: center;
      padding: 8px 2px;
      text-decoration: none;
    }
    
    li a:hover {
      background-color: #feae02;
    }
    
    li a.current:hover {
      background-color: #F27930;
    }
    
    li a.divider:hover {
      background-color: #F27930;
    }
  </style>
</head>

<body>
  <div class="sticky">
    <ul style="min-width:884px">
      <li><a class="current"><b>Jump to Article:</b></a></li>
      <!-- <hr class="hrNav"> -->
      <li><a class="link" href="#top">Top</a></li>
      <li><a class="divider">|</a></li>
      <li><a class="link" href="#article1">Article 1</a></li>
      <li><a class="divider">|</a></li>
      <li><a class="link" href="#article2">Article 2</a></li>
      <li><a class="divider">|</a></li>
      <li><a class="link" href="#article3">Article 3</a></li>
      <li><a class="divider">|</a></li>
      <li><a class="link" href="#article4">Article 4</a></li>
      <li><a class="divider">|</a></li>
      <li><a class="link" href="#article5">Article 5</a></li>
      <li><a class="divider">|</a></li>
      <li><a class="link" href="#article6">Article 6</a></li>
      <li><a class="divider">|</a></li>
      <li><a class="link" href="#article7">Article 7</a></li>
    </ul>
  </div>
</body>

</html>

Ответ №2:

Это проблема с заполнением.

Итак, будет 2 решения.

  • используйте @media, чтобы меню содержало хлебные крошки, когда ширина браузера мала.
  • если вы собираетесь принудительно отображать элементы навигации с помощью разрыва строки, используйте flex

Просто добавьте 2 строки в свой ul стиль

 ul {
  ...
  display: flex;
  flex-flow: row wrap;
}

Итак, конечный результат будет

 body {
    margin: 0;
    background-color: white;
}

div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding-left: 0px;
    padding-right: 0px;
    overflow: hidden;
    background-color: #F27930;
    box-shadow: 5px 0px 0px 0px 5px lightgrey;
}

li {
    float: left;
    font-family: roboto;
    color: white;
}

li a.link {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 14px;
    text-decoration: none;
}

li a.current {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.divider {
    display: block;
    top: 50%;
    font-size: 25px;
    color: #FCD031;
    text-align: center;
    padding: 8px 2px;
    text-decoration: none;
}

li a:hover {
    background-color: #feae02;
}

li a.current:hover {
    background-color: #F27930;
}

li a.divider:hover {
    background-color: #F27930;
}  
 <link href="https://fonts.googleapis.com/css2?family=Robotoamp;display=swap" rel="stylesheet">

<div class="sticky">
    <ul>
        <li><a class="current"><b>Jump to Article:</b></a></li>
        <!-- <hr class="hrNav"> -->
        <li><a class="link" href="#top">Top</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article1">Article 1</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article2">Article 2</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article3">Article 3</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article4">Article 4</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article5">Article 5</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article6">Article 6</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article7">Article 7</a></li>
    </ul>
</div>