-1

私は水平メニュー用にこの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 (幅 960 ピクセル) 内のページの右側にメニューをフロートさせ、メニューの横にロゴを左側にフロートさせるにはどうすればよいですか?

ここに私が持っているものがあります: http://jsfiddle.net/Mqs22/1/

ここに私が試したものがあります: http://jsfiddle.net/ccZFs/

4

2 に答える 2

0

あなたのフロートは、ラッパーだけでなくリスにもある必要があります。このような：

#example-one li { 
    display: inline-block;  
    float: right;
}

フィドル: http://jsfiddle.net/KyleMuir/Mqs22/2/

お役に立てれば。

于 2013-10-03T19:42:22.933 に答える
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正しく整列しませんでした。

JSFIDDLE

于 2013-10-03T20:02:36.273 に答える