Question

我有一个奇怪的问题，将div放在另一个div中。我试图制作一个导航栏，这里是html：

 <body>
    <div class="nav">
         <div class="navbar">
             <ul>
                 <li><a href="#">Home</a></li>
                 <li><a href="#">Our Story</a></li>
                 <li><a href="#">Gallery</a></li>
                 <li><a href="#">Our Future</a></li>
                 <li><a href="#" class="right">Join us</a></li>
                 <li><a href="#" class="right">Contact</a></li>
             </ul>
         </div>
    </div>

和相应的CSS：

.nav{
 width:100%;
 }
.navbar {
 width:75%;
 height:50px;
 margin: 0 auto;
 background-color:#E64888;   
 position:fixed;
}

所以这在我的任何浏览器中都无法工作 - chrome，firefox，即......这个酒吧只是坐在最左侧。我也尝试过＆＃34; margin-left：auto; margin-right：auto＆＃34;方法，但仍然没有工作。这真的很烦人，因为我无法弄清楚出了什么问题。提前谢谢。

Answer 1

尝试:(据我了解你的问题）：

.nav li {list-style: none; display: inline-block; }

Working Fiddle

Answer 2

如果您希望主要nav ul居中，则需要将其父级（在本例中为html和body）设置为具有宽度。否则，您必须处理display上的维度和布局（li）类型以及list-style-type元素上的ul li（因此您看不到点）。

ul上还有一个填充（这是正常列表中右边的li s），你必须要处理它，或者它看起来很远对（和“未经审查”）。

body, html {
    width: 100%;
    margin: 0;
    padding: 0;
}
.nav {
    width: 100%;
}
.navbar ul {
    width: 75%;
    height: 50px;
    margin: 0 auto;
    padding: 0;
    background-color: #E64888;
    list-style-type: none;
    text-align: center;
}
.navbar ul li {
    display: inline;
    padding: 0;
    margin: 0;
}

http://jsfiddle.net/97B52/

CSS：在导航栏中居中div

2 个答案: