如何以div为中心导航

Question

我试图将导航栏置于div体中间。我希望导航栏从div的一侧到另一侧但是如果有意义的话，将ul中的列表放在div的中间位置。在尝试在线示例后，我似乎无法弄明白。感谢

body {
    margin: 0px;
    padding: 0px;
    background-color: #505050 ;
}

#body {
    width: 75%;
    margin: 0 auto;
    position: center;
    background-color: #C0C0C0;
    height: 100%;
}

.nav {

}
.nav ul {
    background-color: #CCCCCC;
    width: 100%;
    padding: 0;
    text-align: center;

}

.nav li {
    list-style: none;
    font-family: Arial Black;
    padding: 0px;
    height:40px;
    width: 120px;
    line-height: 40px;
    border: none;
    float: left;
    font-size: 1.3em;
    background-color: #CCCCCC;
    display:inline;

}

.nav a {
    display: block;
    color: black;
    text-decoration: none;
    width: 60px;

}

<div id="body">
    <h2>Hello World!</h2>
    <div class="nav">
        <ul>
            <li><a href="#">Home<a></li>
            <li><a href="#">About<a></li>
            <li><a href="#">News<a></li>
            <li><a href="#">Contact<a></li>
        </ul>
    </div>
</div>

Answer 1

我在此处附上http://jsfiddle.net/o4716uo9/

将inline-block用于li

Answer 2

在您的情况下，

background属性应该在ul元素中设置，而不是li。删除导航中的float。此外，a元素未正确关闭。主要变化：

.nav ul {
  background-color: #cccccc;
  text-align: center;
}

.nav ul li {
  display: inline-block;
  min-width: 120px;
  [...]
}  

我建议你看看bootstrap framework。这对你来说很有意思。

Answer 3

您可以更改一些内容以解决问题：

1）您的<a>元素的宽度为60px。你可以删除它。

2）您.nav li的宽度为120px。我会将其更改为25%（如果只有四个导航项目）。

http://jsfiddle.net/xLnz90ek/

是否更接近预期的效果。

Answer 4

这是你想要做的吗？

＆＃13;

＆＃13;

* { margin:0; padding:0 }


html {
  background-color: #505050;
  font-size: 4vw;
}

header {
  width: 75%;
  margin: 0 auto;
  background-color: #C0C0C0;
}

nav {
  background-color: #CCCCCC;
  display: flex;
  padding: 0.2rem 0;
}

nav a {
  flex: 1 0 auto;
  font-family: Arial Black;
  font-size: 1rem;
  background-color: #CCCCCC;
  color: black;
  text-decoration: none;
  text-align: center;
  margin: 0 0.3rem;
}

＆＃13;

<header>
  <h2>Hello World!</h2>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">News</a>
    <a href="#">Contact</a>
  </nav>
</header>

＆＃13;

＆＃13;

＆＃13;