如何将导航栏集中在自己的线上

Question

Fiddle：https://jsfiddle.net/sm6yvwmu/1/

我正试着把导航栏居中；然而，我的side元素总是出现在与我的导航栏相同的行中。我该怎么解决这个问题？

提前感谢！

#wrapper {
  width: 600px;
  margin: 0 auto;
}
#nav {
  width: 500px;
  margin: 0 auto;
  list-style-type: none;
  display: block;
}
#nav li {
  float: left;
}
#nav a {
  text-align: center;
  text-decoration: none;
  padding: 5px;
}
aside {
  float: left;
  padding: 5px;
  height: 200px;
  width: 100px;
  display: block;
}

<header>Portfolio</header>
<ul id="nav">
  <li><a href="#">About</a></li>
  <li><a href="#">Writing</a></li>
  <li><a href="#">Multimedia</a></li>
  <li><a href="#">Resume</a></li>
  <li><a href="#">Contact</a></li>
</ul>
<aside>
  Michelle
</aside>

Answer 1

更新的Fidle

#nav li{
    display: inline-block;
}

使用"内联块"而不是"浮动"

Answer 2

编织：http://kodeweave.sourceforge.net/editor/#bed33b10b7298bfb9ba85eaf5ccb7ed3

您已将display block应用于aside，因此它将自动显示在新行中，除非您有float。所以去掉浮子，你就好了。

您还可以告诉每个列表显示为内联或内联块。

#wrapper {
  width: 600px;
  margin: 0 auto;
}
#nav {
  width: 100%;
  margin: 0 auto;
  list-style-type: none;
  display: block;
  padding: 0;
  text-align: center;
}
#nav li {
  display: inline-block;
}
#nav a {
  text-align: center;
  text-decoration: none;
  margin: 5px;
}
aside {
  height: 200px;
  width: 100px;
  display: block;
}

<header>Portfolio</header>
<ul id="nav">
  <li><a href="#">About</a></li>
  <li><a href="#">Writing</a></li>
  <li><a href="#">Multimedia</a></li>
  <li><a href="#">Resume</a></li>
  <li><a href="#">Contact</a></li>
</ul>
<aside>
  Michelle
</aside>