css - 如何使菜单项在 flexbox 中水平显示

Question

这是有问题的 HTML5 代码:

* {
  margin: 0;
  padding: 0;
}
h1 {
  font: bold 20px tahoma;
}
h2 {
  font: bold 14px tahoma;
}
#big_wrapper {
  border: 1px solid black;
  width: 1000px;
  margin: 20px auto;
  text-align: left;
}
#top_header {
  padding: 20px;
  background: yellow;
  border: 1px solid blue;
}
#top_menu {
  background: blue;
  color: white;
}
#top_menu li {
  List-style: none;
  padding: 5px;
  font: bold 14px tahoma;
}
#main_section {
  float: left;
  width: 660px;
  margin: 30px;
}
#side_news {
  Width: 220px;
  Padding: 30px;
  margin: 20px 0px;
  Background: #66cccc;
}
#the_footer {
  padding: 20px;
  border-top: 2px solid green;
}
article {
  background-color: #fffbcc;
  border: 1px solid red;
  padding: 20px;
  margin-bottom: 15px;
}
article footer {
  text-align: right;
}

<div id = "big_wrapper">
  <header id = "top_header">
    <h1>Welcome to the example</h1>
  </header>
  <nav id = "top_menu">
    <ul>
      <li>Home</li>
      <li>Tutorials</li>
      <li>Poscast</li>
    </ul>
  </nav>
  <section id = "main_section">
    <article>
      <header>
        <hgroup>
          <h1>Title of Article</h1>
          <h2>Subtitle of Article</h2>
        </hgroup>
      </header>
      <p>This is my first article !</p>
      <footer>
        <p>- Written by me</p>
      </footer>
    </article>
    <article>
      <header>
        <hgroup>
          <h1>Title of Article2</h1>
          <h2>Subtitle of Article2</h2>
        </hgroup>
      </header>
      <p>The second best article Eva!</p>
      <footer>
        <p>- Written by me</p>
      </footer>
    </article>
  </section>
  <aside id = "side_news">
    <h4>News</h4>
    Hello everyone!
  </aside>
  <footer id = "the_footer">
    Copywrite &copy;me
  </footer>
</div>

我希望菜单项 (#top_menu) 水平显示，所以我添加了

#top_menu {
  display: flex;
  flex-direction: row;
}

但菜单并没有给人留下深刻印象，而是一直垂直显示。 那么，我怎样才能让一个元素水平出现在一个灵活的盒子里呢？

Answer 1

问题是 #top_menu 看起来像这样:

<nav id="top_menu">
  <ul>
    <li>Home</li>
    <li>Tutorials</li>
    <li>Poscast</li>
  </ul>
</nav>

因此，如果您将其设为 flex 容器，它将只有一个 flex 元素:ul。

相反，您应该使 ul 成为 flex 容器，因此 li 将成为 flex 元素，并排成一行:

#top_menu > ul {
  display: flex;
}

* {
  margin: 0;
  padding: 0;
}
h1 {
  font: bold 20px tahoma;
}
h2 {
  font: bold 14px tahoma;
}
#big_wrapper {
  border: 1px solid black;
  width: 1000px;
  margin: 20px auto;
  text-align: left;
}
#top_header {
  padding: 20px;
  background: yellow;
  border: 1px solid blue;
}
#top_menu {
  background: blue;
  color: white;
}
#top_menu > ul {
  display: flex;
}
#top_menu li {
  List-style: none;
  padding: 5px;
  font: bold 14px tahoma;
}
#main_section {
  float: left;
  width: 660px;
  margin: 30px;
}
#side_news {
  Width: 220px;
  Padding: 30px;
  margin: 20px 0px;
  Background: #66cccc;
}
#the_footer {
  padding: 20px;
  border-top: 2px solid green;
}
article {
  background-color: #fffbcc;
  border: 1px solid red;
  padding: 20px;
  margin-bottom: 15px;
}
article footer {
  text-align: right;
}

<div id = "big_wrapper">
  <header id = "top_header">
    <h1>Welcome to the example</h1>
  </header>
  <nav id = "top_menu">
    <ul>
      <li>Home</li>
      <li>Tutorials</li>
      <li>Poscast</li>
    </ul>
  </nav>
  <section id = "main_section">
    <article>
      <header>
        <hgroup>
          <h1>Title of Article</h1>
          <h2>Subtitle of Article</h2>
        </hgroup>
      </header>
      <p>This is my first article !</p>
      <footer>
        <p>- Written by me</p>
      </footer>
    </article>
    <article>
      <header>
        <hgroup>
          <h1>Title of Article2</h1>
          <h2>Subtitle of Article2</h2>
        </hgroup>
      </header>
      <p>The second best article Eva!</p>
      <footer>
        <p>- Written by me</p>
      </footer>
    </article>
  </section>
  <aside id = "side_news">
    <h4>News</h4>
    Hello everyone!
  </aside>
  <footer id = "the_footer">
    Copywrite &copy;me
  </footer>
</div>