#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>