除非显示来自 ul 的要点，否则嵌套的 flexbox 不起作用
[英]Nested flexbox does not work unless bullet points from ul are showing
问题描述
I'm doing a "Code Along" sort-of exercise by Colt Steele's web dev bootcamp on Udemy.
我正在通过 Colt Steele 在 Udemy 上的网络开发训练营进行“代码沿用”之类的练习。 Essentially, adding justify-content: space-evenly to ul { doesn't do anything;本质上，将 justify-content: space-evenly 添加到 ul { 不会做任何事情； the elements within ul sit on the left. ul 中的元素位于左侧。 A workaround I tried was commenting out display: inline from ul, li {, which does work, but bullet points show up.我尝试的一种解决方法是注释掉 display: inline from ul, li {，这确实有效，但会显示要点。 I'm following on the same file I downloaded from Udemy.我正在关注从 Udemy 下载的同一个文件。 Can you help me find what I'm missing?你能帮我找到我缺少的东西吗？ Thank you!谢谢！ My code below: PS: This is my very first post, I hope I formatted my question the right way.我的代码如下： PS：这是我的第一篇文章，我希望我以正确的方式格式化我的问题。
body { font-family: "Open Sans", sans-serif; } h1 { font-size: 6em; text-align: center; } nav { font-size: 1.5em; display: flex; justify-content: space-between; } ul { border: 2px solid black; flex: 1; max-width: 50%; display: flex; /* DOES NOT SPACE EVENLY */ justify-content: space-evenly; } ul, li { /* CONFLICTS WITH justify-content: space-evenly INSIDE ul */ display: inline; margin: 0; padding: 0; } @media (max-width: 768px) { h1 { font-size: 4em; } } @media (max-width: 576px) { h1 { font-size: 3em; } }
<!DOCTYPE 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="starter.css"> </head> <body> <nav> <!-- FLEXBOX PARENT START --> <a href="#home">Home</a> <ul> <!-- FLEXBOX CHILD START --> <li> <a href="#Home">Learn More</a> </li> <li> <a href="#Home">About</a> </li> <li> <a href="#Home">Contact</a> </li> <!-- FLEXBOX CHILD END --> </ul> <a href="#signup">Sign Up</a> <!-- FLEXBOX PARENT END --> </nav> <h1>Media Queries</h1> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2022-05-24 13:19:55
Using display: inline;使用display: inline; on your ul, li is affecting the flex you have on your ul .在您的ul, li正在影响您在ul上的flex 。 The proper way of removing the :marker 's on the ul is by using list-style-type: none;删除ul上的:marker的正确方法是使用list-style-type: none; on your li .在你的li 。 Doing this solves your space-evenly issue.这样做可以解决您的space-evenly问题。
body { font-family: "Open Sans", sans-serif; } h1 { font-size: 6em; text-align: center; } nav { font-size: 1.5em; display: flex; justify-content: space-between; } ul { border: 2px solid black; flex: 1; max-width: 50%; display: flex; justify-content: space-evenly; } ul, li { list-style-type: none; margin: 0; padding: 0; } @media (max-width: 768px) { h1 { font-size: 4em; } } @media (max-width: 576px) { h1 { font-size: 3em; } }
<!DOCTYPE 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="starter.css"> </head> <body> <nav> <!-- FLEXBOX PARENT START --> <a href="#home">Home</a> <ul> <!-- FLEXBOX CHILD START --> <li> <a href="#Home">Learn More</a> </li> <li> <a href="#Home">About</a> </li> <li> <a href="#Home">Contact</a> </li> <!-- FLEXBOX CHILD END --> </ul> <a href="#signup">Sign Up</a> <!-- FLEXBOX PARENT END --> </nav> <h1>Media Queries</h1> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.