我有我的horiontal菜单的css代码:
.nav-wrap {
float:right;
}
/* Clearfix */
.group:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; }
*:first-child+html .group { zoom: 1; } /* IE7 */
/* Example One */
#example-one {
margin: 0 auto;
list-style: none;
position: relative;
width: 960px;
}
#example-one li {
display: inline-block;
}
#example-one a {
color: #ffffff;
font-size: 14px;
float: left;
padding: 6px 10px 4px 10px;
text-decoration: none;
text-transform: uppercase;
}
#example-one a:hover {
color: #000000;
}
#magic-line {
position: absolute;
bottom: -2px;
left: 0;
width: 100px;
height: 4px;
background: #000000;
}
.current_page_item a {
color: #000000 !important;
}
.ie6 #example-one li, .ie7 #example-one li {
display: inline;
}
.ie6 #magic-line {
bottom: -3px;
}
如何让菜单浮动到标题div(宽度为960px)内的页面右侧,并在菜单旁边浮动一个徽标
这就是我所拥有的:http://jsfiddle.net/Mqs22/1/
以下是我的尝试:http://jsfiddle.net/ccZFs/
答案 0 :(得分:0)
你的浮子需要在lis和包装器上。像这样:
#example-one li {
display: inline-block;
float: right;
}
小提琴:http://jsfiddle.net/KyleMuir/Mqs22/2/
希望这有帮助。
答案 1 :(得分:0)
我让两个元素都适合你。
我使用position: absolute;
来获取它。
<强> HTML 强>
<div class="nav-wrap">
<ul class="group" id="example-one">
<li class="current_page_item"><a href="#">Home</a></li>
<li><a href="#">Buy Tickets</a></li>
<li><a href="#">Group Sales</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">The Show</a></li>
</ul>
</div>
<强>的jQuery 强>
var $el, leftPos, newWidth;
$mainNav2 = $("#example-two");
/*
EXAMPLE ONE
*/
/* Add Magic Line markup via JavaScript, because it ain't gonna work without */
$("#example-one").append("<li id='magic-line'></li>");
/* Cache it */
var $magicLine = $("#magic-line");
$magicLine
.width($(".current_page_item").width())
.css("left", $(".current_page_item a").position().left)
.data("origLeft", $magicLine.position().left)
.data("origWidth", $magicLine.width());
$("#example-one li").find("a").hover(function() {
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();
$magicLine.stop().animate({
left: leftPos,
width: newWidth
});
}, function() {
$magicLine.stop().animate({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
});
要使MagicLine工作,您需要添加他们用于此的jquery,以及确保让jQuery处理小提琴。
width: 960px;
上有ul
,导致它无法正确对齐。