我在顶部有一个固定的菜单,我想将它居中,红色框应该在橙色框内:
code in the fiddle
<?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>
我正在框内寻找居中菜单,每个项目都在框内。
提前致谢
最佳答案
http://jsfiddle.net/jnkhbhuc/2/(最后是CSS修改)
差距很大,原因有几个,其中最重要的是您要float
调整项目right
,使它们在向右对齐的同时又换行。您应该float: left
您的li
元素。仍然留下了一些填充,这是可以使用ul
修复的padding: 0
的默认行为。但是您的li
仍然太宽,可以用width: 11.11%;
固定(100%/ 9个项目)。
注意:float
ing right
的有趣结果是项目将以相反的顺序出现。这是因为项目是从右到左排列的。如果实际上确实希望它们以相反的顺序出现,则仍然可以使用float: right
进行width: 11.11%
。