如何使菜单项水平显示在弹性框中

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竞争者，它只会有一个弹性项：ul。

相反，你应该使ul成为一个弹性容器，因此li将是弹性项目，并且将被放置在一行中：

#top_menu > ul {
  display: flex;
}

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;