Использование CSS Flex и space-evenly не работает
Я начал разбираться с гибкостью, и как только я понял, что у меня есть твердое понимание, и попытался реализовать его, я обнаружил, что это не работает.
Основная проблема в том, что justify-content: space-evenly внутри моего ul не действует, и я не понимаю, почему. Из всего, что я видел, это правильно и должно работать, я даже видел людей, использующих это в учебниках в одной и той же структуре.
Я поместил рамку вокруг элемента, чтобы убедиться, что он занимает место. Я пробовал разные свойства flex, они тоже не будут работать. Я что-то делаю, отключаю flex?
Любые идеи, что я делаю неправильно здесь?
CSS
h1 {
font-size: 6em;
text-align: center;
}
nav {
font-size: 1.5em;
display: flex;
justify-content: space-between;
}
ul {
border: 1px solid red;
display: flex;
flex-grow: 1;
justify-content: space-evenly;
max-width: 50%;
}
ul,li {
display: inline;
margin: 0;
padding: 0;
}
HTML
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Media Queries</title>
<link href = "https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel = "stylesheet">
<link rel = "stylesheet" href = "app.css">
</head>
<body>
<nav>
<a href = "#home">Home</a>
<ul>
<li>
<a href = "#Home">Learn More</a>
</li>
<li>
<a href = "#Home">About</a>
</li>
<li>
<a href = "#Home">Contact</a>
</li>
</ul>
<a href = "#signup">Sign Up</a>
</nav>
<h1>Flex Box
</h1>
</body>
</html>
Ответы 5
Здесь вы можете попробовать эту логику, она работает:
<html lang = "en">
<head>
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<title>Media Queries</title>
<link
href = "https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap"
rel = "stylesheet"
/>
<link rel = "stylesheet" href = "app.css" />
</head>
<style>
h1 {
font-size: 6em;
text-align: center;
}
nav {
font-size: 1.5em;
display: flex;
justify-content: space-between;
}
ul {
border: 1px solid red;
max-width: 50%;
}
ul,
li {
display: inline;
margin: 0;
padding: 0;
}
ul {
display: flex;
flex-grow: 1;
justify-content: space-evenly;
}
</style>
<body>
<nav>
<a href = "#home">Home</a>
<ul>
<li>
<a href = "#Home">Learn More</a>
</li>
<li>
<a href = "#Home">About</a>
</li>
<li>
<a href = "#Home">Contact</a>
</li>
</ul>
<a href = "#signup">Sign Up</a>
</nav>
<h1>Flex Box</h1>
</body>
</html>Вам нужно удалить «display: inline» из селекторов ul и li.
ul,li {
margin: 0;
padding: 0;
}
вы перезаписываете display: flex своего ul строкой кода под ней (display: inline). вот решение ниже с комментариями. используйте list-style: none, чтобы избавиться от маркеров на li
h1 {
font-size: 6em;
text-align: center;
}
nav {
font-size: 1.5em;
display: flex;
justify-content: space-between;
}
ul {
border: 1px solid red;
display: flex;
flex-grow: 1;
justify-content: space-evenly;
max-width: 50%;
}
ul,li {
/* -- remove the below line. you're over-writing the display of ul
display: inline;
*/
/* -- add this below line to get rid of the bullet points */
list-style: none;
margin: 0;
padding: 0;
}<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Media Queries</title>
<link href = "https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel = "stylesheet">
<link rel = "stylesheet" href = "app.css">
</head>
<body>
<nav>
<a href = "#home">Home</a>
<ul>
<li>
<a href = "#Home">Learn More</a>
</li>
<li>
<a href = "#Home">About</a>
</li>
<li>
<a href = "#Home">Contact</a>
</li>
</ul>
<a href = "#signup">Sign Up</a>
</nav>
<h1>Flex Box
</h1>
</body>
</html>Вы устанавливаете display: flex с помощью селектора ul, но после этого у вас есть другой селектор ul -> ul,li, где вы устанавливаете display: inline
Таким образом, вы переопределяете свое предыдущее свойство отображения
ul {
display: flex;
...
}
ul,li {
display: inline;
...
}
Итак, вы должны изменить второй селектор. Удалите ul из него.
Кроме того, элемент ul по умолчанию имеет отступ, удалите его с помощью padding: 0; в селекторе ul, чтобы он действительно располагался равномерно.
См. ниже пример, ваш space-evenly работает здесь
h1 {
font-size: 6em;
text-align: center;
}
nav {
font-size: 1.5em;
display: flex;
justify-content: space-between;
}
ul {
border: 1px solid red;
display: flex;
flex-grow: 1;
justify-content: space-evenly;
max-width: 50%;
padding: 0;
}
li {
display: inline;
margin: 0;
padding: 0;
}<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Media Queries</title>
<link href = "https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel = "stylesheet">
<link rel = "stylesheet" href = "app.css">
</head>
<body>
<nav>
<a href = "#home">Home</a>
<ul>
<li>
<a href = "#Home">Learn More</a>
</li>
<li>
<a href = "#Home">About</a>
</li>
<li>
<a href = "#Home">Contact</a>
</li>
</ul>
<a href = "#signup">Sign Up</a>
</nav>
<h1>Flex Box
</h1>
</body>тег не работает с display:flex; как использовали где-то. Вот почему вам нужно заставить тег ul использовать flex. Вы должны просто прямо--
ul {
border: 1px solid red;
display: flex !important;
flex-grow: 1;
justify-content: space-evenly;
max-width: 50%;
}
вы должны использовать !important, и все будет работать так, как вы хотели.
Вам следует избегать использования important, когда это возможно, как вы можете видеть в других ответах, вы можете легко решить проблему без него.
(и добавить
li {display: inline;})