在右对齐的导航菜单中左对齐第一个元素
问题描述:
我的菜单很少有无序列表项,如下所示。在右对齐的导航菜单中左对齐第一个元素
现在我需要家的菜单放置在左侧和右侧的项目的其余部分。 我该怎么做?这里是我的菜单CSS:
.menu{
position: absolute;
top:10px;
left:315px;
width:920px;
border: 1px solid #d6d6d6;
background: #fff;
padding: 15px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border-radius : 7px;
-moz-border-radius : 7px;
-webkit-border-radius : 7px;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
height: 18px;
}
.dark {
background : rgb(89,89,89);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
border: 1px solid #272727;
}
a {
text-decoration: none;
color: #262626;
line-height: 20px;
}
ul {
margin: 0;
padding: 0;
z-index: 300;
position: absolute;
}
ul li {
list-style: none;
float:left;
text-align: center;
}
ul li a {
padding: 0 20px;
text-align: center;
}
这是我的标记是如何:
<div class="menu dark">
<ul >
<li><a href="">Home</a></li>
<li><a href="">Item1</a></li>
<li><a href="">Item2</a></li>
<li><a href="">Item3</a></li>
<li><a href="">Item4</a></li>
<li><a href="">Item5</a></li>
</ul>
</div>
答
没有足够的CSS来完全再现你的屏幕截图,但基本的公式应该是这样的:
.menu ul {
text-align:right;
}
.menu li {
display:inline-block;
}
.menu li:first-child {
float:left;
}
你可以做一些与.menu li { float:right; }
而不是display:inline-block;
,但是菜单项的顺序会颠倒过来。
还有另外一种方式,你可以做到这一点,可能实际上是更扎实一点,因为inline-block
可以冒险:
.menu {
position:relative; /* contain absolutely positioned elements */
}
.menu ul {
float:right;
}
.menu li {
float:left;
}
.menu li:first-child {
position:absolute;
left:15px; /* Match your padding on <ul> */
top:15px;
}
@ Madmartigan,感谢您的快速回复,这正是我需要什么,并感谢演示。 – coder 2012-01-07 22:48:00
您可能需要在CSS中更具体,我没有考虑子菜单/嵌套列表。所有这些东西只需要应用到顶层。 FWIW:我喜欢解决方案2. – 2012-01-07 22:54:55
@ Madmartigan-其实我从这里拿了一个例子,稍微修改了一下http://blog.creatdesigns.com/2010/02/creating-a-fancy-menu-using-css3-和jQuery的/ – coder 2012-01-07 22:56:13