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