Как центрировать элементы списка с помощью flexbox?
Я пытаюсь создать панель навигации с заголовком слева и элементами списка по центру. Я использовал flexbox для горизонтального размещения ссылок. Затем я добавил margin: auto к ul, что переместило их влево, но не центрировало их симметрично. Я предполагаю, что ул больше не может двигаться. Я проверил другие подобные сообщения, но не мог понять, в чем проблема. Спасибо за ваше время.
HTML
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Open Sans', sans-serif;
background: #fff;
color: #333;
line-height: 1.6;
background: url('/img/showcase.jpg.jpg');
}
#navbar {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
top: 0;
width: 100%;
height: 60px;
background-color: rgba(10, 10, 10, 0.5);
}
#navbar ul {
display: flex;
justify-content: space-around;
text-align: center;
margin: 0 auto;
padding: 0;
}
#navbar li {
list-style: none;
padding: 20px;
}<nav id = "navbar">
<div class = "logo">
<h1>Welcome</h1>
</div>
<ul>
<li><a href = "#">Home</a></li>
<li><a href = "#">Home</a></li>
<li><a href = "#">Home</a></li>
<li><a href = "#">Home</a></li>
</ul>
</nav>Извините, но что вы подразумеваете под редактированием кода? Я уже понятия не имею, каковы соответствующие проблемы.
ширина:100% до ул?
он только создает пространство между якорями, делая расстояние между каждым якорем огромным.
Ответы 2
Вы можете удалить margin: 0 auto; из #navbar ul
Флексбокс в родительском контейнере ( #navbar ) уже центрирует ul. Добавление margin: 0 auto к нему после добавления flexbox ломает макет.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Open Sans', sans-serif;
background: #fff;
color: #333;
line-height: 1.6;
background: url('/img/showcase.jpg.jpg');
}
#navbar {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
top: 0;
width: 100%;
height: 60px;
background-color: rgba(10, 10, 10, 0.5);
}
#navbar ul {
display: flex;
justify-content: space-around;
text-align: center;
/* margin: 0 auto; REMOVE THIS LINE */
padding: 0;
}
#navbar li {
list-style: none;
padding: 20px;
}<nav id = "navbar">
<div class = "logo">
<h1>Welcome</h1>
</div>
<ul>
<li><a href = "#">Home</a></li>
<li><a href = "#">Home</a></li>
<li><a href = "#">Home</a></li>
<li><a href = "#">Home</a></li>
</ul>
</nav>Кроме того, включение вашего логотипа в список может дать лучшие результаты:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Open Sans', sans-serif;
background: #fff;
color: #333;
line-height: 1.6;
background: url('/img/showcase.jpg.jpg');
}
#navbar, li { /* added flex to li's so content stays vertically centered */
display: flex;
justify-content: center;
align-items: center;
flex: 1;
top: 0;
width: 100%;
height: 60px;
background-color: rgba(10, 10, 10, 0.5);
}
#navbar ul {
display: flex;
justify-content: space-around;
text-align: center;
/* margin: 0 auto; REMOVE THIS LINE */
padding: 0;
}
#navbar li {
list-style: none;
padding: 0 20px; /* fixed vertical padding to 0 from 20px */
background-color: transparent; /* Added for continuity with your design */
}<nav id = "navbar">
<ul>
<li>
<div class='logo'>
<h1>Welcome</h1>
</div>
</li>
<li><a href = "#">Home</a></li>
<li><a href = "#">Home</a></li>
<li><a href = "#">Home</a></li>
<li><a href = "#">Home</a></li>
</ul>
</nav>Если вы хотите добавить пробел между логотипом и элементами списка, вы можете добавить margin-right: ( n ) к самому логотипу. См. ниже:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Open Sans', sans-serif;
background: #fff;
color: #333;
line-height: 1.6;
background: url('/img/showcase.jpg.jpg');
}
#navbar, li { /* added flex to li's so content stays vertically centered */
display: flex;
justify-content: center;
align-items: center;
flex: 1;
top: 0;
width: 100%;
height: 60px;
background-color: rgba(10, 10, 10, 0.5);
}
#navbar ul {
display: flex;
justify-content: space-around;
text-align: center;
/* margin: 0 auto; REMOVE THIS LINE */
padding: 0;
}
#navbar li {
list-style: none;
padding: 0 20px; /* fixed vertical padding to 0 from 20px */
background-color: transparent; /* Added for continuity with your design */
}
.logo { /* Added space between logo and list items */
margin-right: 5rem; /* you can add units in pixels as well if you would like */
}<nav id = "navbar">
<ul>
<li>
<div class='logo'>
<h1>Welcome</h1>
</div>
</li>
<li><a href = "#">Home</a></li>
<li><a href = "#">Home</a></li>
<li><a href = "#">Home</a></li>
<li><a href = "#">Home</a></li>
</ul>
</nav>Обратите внимание, независимо от того, сколько или как мало полей вы добавляете к .logo, все автоматически остается по центру.
Удаление поля: 0 авто; from #navbar ul также удалил расстояние между логотипом и элементами списка и отцентрировал все на линии. Когда я пытался переместить логотип влево, он также сдвигал элементы списка вправо. Кроме того, если я включу свой логотип в список элементов, как можно будет разместить его отдельно слева?
Если вы хотите увеличить расстояние между логотипом и элементами списка, вы можете добавить правое поле к логотипу. Я включаю в редактирование.
Извините, но проблема остается прежней. Я скопировал именно то, что вы изменили, и элементы списка по-прежнему выглядят так, как будто они не центрированы. Если я добавлю поле справа к логотипу и сдвину его влево, он исчезнет со страницы, когда я сверну окно.
Тогда вы не правильно скопировали мой код. Посмотрите на последний фрагмент кода к моему ответу. Весь мой код выше работает в браузере. Все выглядит сосредоточенным для меня - если нет, пожалуйста, укажите более подробно, чего вы пытаетесь достичь. Также вы можете использовать процент для поля вместо фиксированной ширины, такой как пиксели. Или вы даже можете добавить поле прямо в контейнер списка, а не прямо на логотип, если у вас возникли проблемы с вашим локальным кодом. Тем не менее, есть лучшие способы сделать то, что вы пытаетесь достичь. если у меня будет время, я перепишу все для вас.
Если я правильно понял ваш вопрос (пожалуйста, дайте мне знать), это то, что вам нужно:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #fff;
background: url('/img/showcase.jpg.jpg');
color: #333;
font-family: 'Open Sans', sans-serif;
line-height: 1.6;
}
#navbar,
#navbar ul {
display: flex;
}
#navbar {
align-items: center;
background-color: rgba(10, 10, 10, 0.5);
height: 60px;
justify-content: space-between;
}
#navbar ul {
justify-content: center;
width: 100%;
}
#navbar li {
list-style: none;
margin: 0 10px 0 10px;
}
.logo {
margin-left: 20px;
}<nav id = "navbar">
<div class = "logo">
<h1>Welcome</h1>
</div>
<ul>
<li><a href = "#">Home</a></li>
<li><a href = "#">Home</a></li>
<li><a href = "#">Home</a></li>
<li><a href = "#">Home</a></li>
</ul>
</nav>К сожалению, это не то, что я ищу. Я предполагаю, что не смог правильно объяснить свою проблему. Что я хочу сделать, так это рассматривать как логотип, так и элементы списка по отдельности. Я хотел бы центрировать элементы списка на панели навигации. После этого поместите логотип в левой части навигационной панели. В вашем фрагменте кода логотип находится слева, это нормально, но элементы списка все еще немного справа. Извините, если усложняю.
@Akın Uçar Помогите нам помочь вам: попробуйте создать образ того, чего вы хотите достичь. Это единственный способ.
@ Akın Uçar Я вижу все серое. Нет изображения.
@ Akın Uçar Я отредактировал свой ответ. Дайте мне знать.
Элементы списка по-прежнему выглядят так, как будто они не центрированы. Однако удаление логотипа с панели навигации центрирует элементы списка именно так, как я хочу. Вот изображение, показывающее, как это сделать. imgbox.com/ZQZ2BUbz
@Akın Uçar Если вы посмотрите фрагмент кода на полной странице, вы заметите, что список идеально отцентрирован: то есть между логотипом и правой стороной панели навигации такое же пространство (как на вашем первом изображении). Вот как работает флексбокс. Очевидно, что если вы удалите логотип, список будет центрирован относительно всей панели навигации,
Пожалуйста, отредактируйте свой код, чтобы он включал только соответствующие проблемы