使用CSS Flex和平均间距不起作用

t0ybt7op 于 2022-12-05 发布在其他

关注(0)|答案(5)|浏览(151)

我已经开始掌握Flex，当我认为我有了一个坚实的理解并试图实现它时，我发现它不起作用。
主要的问题是我的ul里面的justify-content: space-evenly没有起任何作用，我看不出为什么。从我所看到的一切来看，这是正确的，应该可以工作，我甚至看到有人在教程中使用相同的结构。
我在元素周围放置了一个边框，以确保有足够的空间让它占据。我尝试了不同的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>

css

来源：https://stackoverflow.com/questions/74652533/using-css-flex-and-space-evenly-isnt-working

5条答案

按热度按时间

yjghlzjz1#

您需要删除“显示：内联”。

ul,li {
    margin: 0;
    padding: 0;
}

赞(0）回复(0）举报 2022-12-05

vmpqdwk32#

您正在使用ul选择器设置display: flex，但之后您有另一个ul选择器-〉ul,li，其中您设置了display: inline
因此，您将覆盖以前的显示属性

ul {
    display: flex;
    ...
}

ul,li {
    display: inline;
    ...
}

所以你必须改变第二个选择器，把ul从里面去掉。
另外，ul元素默认有一个填充，在ul选择器中用padding: 0;删除它，以便使它真正均匀地间隔。
请参见下面的示例，您的space-evenly在此处工作
第一次

赞(0）回复(0）举报 2022-12-05

xpcnnkqh3#

在这里你可以试试这个逻辑，它行得通：

<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>

赞(0）回复(0）举报 2022-12-05

chy5wohz4#

你正在用下面的代码行覆盖ul的display: flex（display: inline）。下面是带有注解的解决方案。使用list-style: none去掉li上的项目符号
第一个

赞(0）回复(0）举报 2022-12-05

jchrr9hc5#

标签不适用于display：flex;这就是为什么你需要强制ul标记使用flex的原因。你应该写--

ul {
    border: 1px solid red;
    display: flex !important;
    flex-grow: 1;
    justify-content: space-evenly;
    max-width: 50%;
}

您应该使用！important，一切都将按照您的要求运行。

赞(0）回复(0）举报 2022-12-05

我来回答

使用CSS Flex和平均间距不起作用

5条答案

相关问题

热门标签

最新问答