Flex box отображается как столбец, когда он должен быть строкой
Я собираю то, что должно быть простой панелью навигации и стилем с помощью flex box. По какой-то причине вместо отображения в виде строки (по горизонтали) он отображается в виде столбца (по вертикали).
Я могу сделать ссылки горизонтальными, используя float:left, но тогда они не растягиваются равномерно, чтобы заполнить панель навигации.
Насколько я понимаю, flex-grow:1каждый элемент должен занимать одинаковое количество места. Но этого не происходит.
Есть четыре объявления, которые не работают должным образом:
flex-directionСсылки на панели навигации расположены в столбце, а не в строке.
paddingХотя отступ панели навигации установлен на ноль, он по-прежнему имеет отступы.
text-alignТекст внутри каждого <li> не центрируется по горизонтали
flex-growСсылки расположены неравномерно
Я не уверен, что все они связаны с одной проблемой или с каждой отдельной проблемой.
Вот упрощенный фрагмент:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>Curse of the Nav Bar</title>
<style>
nav {
display: flex;
flex-direction: row; /* not working */
background-color: #d2d6d6;
padding: 0; /* not working */
}
nav a {
display: flex;
text-decoration: none;
list-style: none;
border: 2px solid #727171;
color: #727171;
background-color: #c4c4c4;
padding: 4px;
margin: 2px;
text-align: center; /* not working */
flex-grow: 1; /* not working */
}
nav a:hover,
nav a:active {
background-color: #aaa;
}
</style>
</head>
<body>
<nav>
<ul>
<a href = "#"><li>Once</li></a>
<a href = "#"><li>Upon</li></a>
<a href = "#"><li>A Time</li></a>
<a href = "#"><li>There</li></a>
<a href = "#"><li>Was</li></a>
<a href = "#"><li>A Problematic</li></a>
<a href = "#"><li>Nav Bar</li></a>
</ul>
</nav>
</body>
</html>Раньше я использовал flex box много раз, но никогда не видел, чтобы он так себя вел.
Ответы 5
Вы также можете попробовать указать display: flex для nav ul.
nav ul {
display: flex;
}
Теперь элементы отображаются в строке, а не в столбце.
По умолчанию ul является блочным элементом, поэтому отображение будет блочным для ul.
- используйте
flexнаul, а неnav(вы должны установитьflexна обертку DOM ваших элементов, которые вы хотите, чтобы они былиflex) - Думаю лучше использовать
ulи сразуliнеa(ul li a)
ul {
display: flex;
flex-direction: row;
background-color: #d2d6d6;
padding: 0;
}
nav li {
display: flex;
text-decoration: none;
list-style: none;
border: 2px solid #727171;
color: #727171;
background-color: #c4c4c4;
padding: 4px;
margin: 2px;
text-align: center;
flex-grow: 1;
}
nav a:hover,
nav a:active {
background-color: #aaa;
}<nav>
<ul>
<li>
<a href = "#">Once</a>
</li>
<li>
<a href = "#">Once</a>
</li>
<li>
<a href = "#">Once</a>
</li>
<li>
<a href = "#">Once</a>
</li>
<li>
<a href = "#">Once</a>
</li>
</ul>
</nav>В вашем коде есть небольшая ошибка, вот исправленная, Вы отдали все свойства нави, а вам нужно присвоить их UL,
- Нет необходимости задавать flex-direction: row, так как это свойство по умолчанию.
- Прокладка теперь тоже работает, пожалуйста, проверьте.
nav ul {
display: flex;
text-decoration: none;
flex-direction: row; /* not working */
background-color: #d2d6d6;
padding: 0; /* not working */
}
nav li {
display: flex;
text-decoration: none;
list-style: none;
border: 2px solid #727171;
color: #727171;
background-color: #c4c4c4;
padding: 4px;
margin: 2px;
justify-content: center;
flex-grow: 1;
}
nav a:hover,
nav a:active {
background-color: #aaa;
}<nav>
<ul>
<li><a href = "#">Once</a></li>
<li><a href = "#">Upon</a></li>
<li><a href = "#">A Time</a></li>
<li><a href = "#">There</a></li>
<li><a href = "#">Was</a></li>
<li><a href = "#">A Problematic</a></li>
<li><a href = "#">Nav Bar</a></li>
</ul>
</nav>и еще одна вещь: Ли должен быть прямым потомком UL, а не якорем.
Спасибо. Это был наиболее четко объясненный ответ, который помог мне понять источник основной проблемы. Вы также решили проблемы с заполнением и центрированием текста, поэтому я принимаю ваш ответ как лучший. (Благодарность всем, кто предоставил ответы!)
Я отредактировал фрагмент так, чтобы стиль hover и text-decoration:none теперь также правильно нацеливались.
(Для всех, кому интересно, это редактирование в настоящее время ожидает проверки. Удалим этот комментарий, как только он будет проверен и станет видимым для всех.)
Кое-что, что я должен был найти (и я опубликую здесь, если другие сочтут это полезным), — это то, как сделать элементы <li> кликабельными, поскольку обертывание их внутри <a> приводит к разрыву макета. Просто добавьте событие onclick. stackoverflow.com/a/16582588/2454914 Это в сочетании со стилем hover на <li> (не <a>) и добавлением cursor:pointer к <li> заставляет его вести себя так, как если бы он был якорем.
В nav a {...} заменить display: flex; из display: inline-flex;
Вот эффект:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>Curse of the Nav Bar</title>
<style>
nav {
display: flex;
flex-direction: row; /* not working */
background-color: #d2d6d6;
padding: 0; /* not working */
}
nav a {
display: inline-flex;
text-decoration: none;
list-style: none;
border: 2px solid #727171;
color: #727171;
background-color: #c4c4c4;
padding: 4px;
margin: 2px;
text-align: center; /* not working */
flex-grow: 1; /* not working */
}
nav a:hover,
nav a:active {
background-color: #aaa;
}
</style>
</head>
<body>
<nav>
<ul>
<a href = "#"><li>Once</li></a>
<a href = "#"><li>Upon</li></a>
<a href = "#"><li>A Time</li></a>
<a href = "#"><li>There</li></a>
<a href = "#"><li>Was</li></a>
<a href = "#"><li>A Problematic</li></a>
<a href = "#"><li>Nav Bar</li></a>
</ul>
</nav>
</body>
</html>Вы берете простое изменение
nav {
display: flex;
flex-direction: row; /* not working */
background-color: #d2d6d6;
padding: 0; /* not working */
}
К
nav ul {
display: flex;
flex-direction: row; /* not working */
background-color: #d2d6d6;
padding: 0; /* not working */
}
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>Curse of the Nav Bar</title>
<style>
nav ul {
display: flex;
flex-direction: row; /* not working */
background-color: #d2d6d6;
padding: 0; /* not working */
}
nav a {
display: flex;
text-decoration: none;
list-style: none;
border: 2px solid #727171;
color: #727171;
background-color: #c4c4c4;
padding: 4px;
margin: 2px;
text-align: center; /* not working */
flex-grow: 1; /* not working */
}
nav a:hover,
nav a:active {
background-color: #aaa;
}
</style>
</head>
<body>
<nav>
<ul>
<a href = "#"><li>Once</li></a>
<a href = "#"><li>Upon</li></a>
<a href = "#"><li>A Time</li></a>
<a href = "#"><li>There</li></a>
<a href = "#"><li>Was</li></a>
<a href = "#"><li>A Problematic</li></a>
<a href = "#"><li>Nav Bar</li></a>
</ul>
</nav>
</body>
</html>
скажите мне для получения дополнительной помощи