除非UL的子弹点显示

发布于 2025-02-01 09:22:31 字数 2175 浏览 3 评论 0原文

我正在做柯尔特·斯蒂尔（Colt Steele）的Web Dev Bootcamp在Udemy上进行的“代码”练习。本质上，添加Jusify-content：space-evelly to ul {不做任何事情； UL坐在左侧的元素。我尝试过的解决方法是评论显示：li {ul {确实有效的内联显示器，但要点出现。我关注我从Udemy下载的同一文件。你能帮我找到我缺少的东西吗？谢谢你！我的代码下面： 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>

原文

I'm doing a "Code Along" sort-of exercise by Colt Steele's web dev bootcamp on Udemy.
Essentially, adding justify-content: space-evenly to ul { doesn't do anything; the elements within ul sit on the left. A workaround I tried was commenting out display: inline from ul, li {, which does work, but bullet points show up. I'm following on the same file I downloaded from 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.

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

疯狂的代价 2025-02-08 09:22:31

使用display：inline; ul，li 正在影响flex您在ul上都有。删除的正确方法：ul上的Marker是通过list style-type：none;在上使用 li 。这样做可以解决您的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>

Using display: inline; on your ul, li is affecting the flex you have on your ul. The proper way of removing the :marker's on the ul is by using list-style-type: none; on your li. Doing this solves your space-evenly issue.

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>

回复收藏 0 原文

~没有更多了~