如何将导航栏放在自己的线上?

时间:2016-05-12 04:34:56

标签: html css

小提琴:https://jsfiddle.net/sm6yvwmu/1/

我试图将导航栏放在中心位置;但是,我的旁边元素与我的导航栏保持一致。我怎样才能解决这个问题?

提前致谢!



#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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

Updated Fidle

#nav li{
    display: inline-block;
}

使用&#34;内联块&#34;相反&#34;浮动&#34;

答案 1 :(得分:1)

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

您已将display block应用于aside,因此它会自动显示在新行中,除非您有浮动。所以移除浮动,你就好了。

您还可以告诉每个列表显示inlineinline-block

&#13;
&#13;
#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;
}
&#13;
<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>
&#13;
&#13;
&#13;