Question

我在顶部有一个固定的菜单，我想将它居中，红色的盒子应该在橙色的盒子里面：

<?php    
header("Content-type: text/css; charset: UTF-8");  
?>

body {
padding:0;
margin:0;
background-image:url('../Images/web_background.png');
background-repeat:repeat;
background-position:right top;
background-attachment:fixed;
background-size:100%;
}

header, footer, section, nav
{
display:blocks;
border: 10px solid blue;
}

.header{
height: 250px;
padding-top: 43px;
border: 10px solid navy;

}

.container
{
border: 1px black solid;
margin: 0 auto;
width:950px; 
border: 10px solid green;

}


.navigation{
height: 100px;
border: 10px solid purple;
}


.content{
height: auto;
min-height: 500px;
overflow: hidden;
border: 10px solid fushia;

}

.navTop
{
width:100%;
position: fixed; 
top: 0px;
right: 0px;
left:0;
border: 10px solid yellow;

}


.nav {
background-color: #EEEEEE;
max-width: 950px;
/*max-height: 40px;*/
min-width: 700px;
min-height: 40px;
margin-left:auto;
margin-right:auto;
border:1px solid #ccc;
box-shadow:6px 6px 12px #888;
-moz-box-shadow: 6px 6px 12px #888; 
-webkit-box-shadow: 6px 6px 12px #888;
border-radius:0px 0px 5px 5px;
-moz-border-radius:0px 0px 5px 5px;
-webkit-border-radius:0px 0px 5px 5px;
text-align: center;
border: 10px solid orange;


}

.inliner {
list-style-type: none;
float: right;
display: inline-block; 
}


.inlinerTop {
width: 120px;
height: 50px;
margin-top: -15px;
background-color: red;
border: 10px solid rose;

}

HTML：

<div class="navTop">
<div class="nav"><ul><li class="inliner inlinerTop">
<a href="Vehicules.html">Véhicules</a></li><li class="inliner inlinerTop">
<a href="Estate.html">Immobilier</a></li><li class="inliner inlinerTop">
<a href="HighTech.html">High-Tech</a></li><li class="inliner inlinerTop">
<a href="House.html">Maison</a></li><li class="inliner inlinerTop">
<a href="Services.html">Services</a></li><li class="inliner inlinerTop">
<a href="Others.html">Autres</a></li><li class="inliner inlinerTop">
<a href="FashionWoman.html">Fashion</a></li><li class="inliner inlinerTop">
<a href="Beauty.html">Beauté</a></li><li class="inliner inlinerTop">
<a href="Leasure.html">Loisirs</a></li></ul></div>

我在盒子里面找一个居中的菜单，每个项目都放在一个盒子里。

提前致谢

Answer 1

http://jsfiddle.net/jnkhbhuc/2/（最后的CSS修改）

由于多种原因，存在很大差距，其中最重要的原因是您float right项float: left因此他们会突破新线同时向右对齐。您应li改为ul元素。这仍然会在左侧留下一些填充，padding: 0的默认行为可以使用li修复。但是，您的width: 11.11%;仍然太宽，可以使用float（100％/ 9项）修复。

注意：right float: right的一个有趣结果是项目将以相反的顺序显示。那是因为这些物品是从右到左摆放的。如果您确实希望它们以相反的顺序显示，您仍可width: 11.11% {{1}}。

Answer 2

你的花车不包含尝试。

nav {overflow:hidden}

或添加clearfix类以包含浮点数

固定菜单位置

2 个答案: