0

次のように、画像の下に座る必要がある 4 つのオプションを含むメニューがあります。

----------------------------------------------------------------
|                        This is an image                      |
----------------------------------------------------------------
Menu 1               Menu 2             Menu 3             Menu4

これらのサイズはレスポンシブなので、メニュー項目を動的に配置しています。私の問題は、間隔が等しくなるようにメニューの幅を計算する方法と、メニュー1とメニュー4が画像の端に合うようにすることです。

4

5 に答える 5

2

一度に4つ以上のメニュー項目があることはありますか？<li>そうでない場合は、リンクをコードなしで簡単にラップし、幅をそれぞれ25％に割り当てることができます。以下の例を参照してください。

HTML

<ul>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
</ul>

CSS

ul {
    list-style: none;
    margin: 0;
    overflow: hidden;
}

li {
    float: left;
    width: 25%;
}
于 2012-10-30T11:19:29.307 に答える
2

アイテムの数が固定されている場合は、それぞれが必要とするパーセンテージを計算できます ( @Chrisが示したように)。

メニュー項目の数が変わる可能性がある場合は、jQuery を使用して幅を決定できます。

var imgWidth = $(".img").width();
var itemWidth = imgWidth / $("ul.menu li").length;

$("ul.menu li").width(itemWidth);

ここでは、画像の幅を取得し、幅を要素の数で割り、この値を各要素liの幅として適用しています。li

デモを参照してください: http://jsfiddle.net/rwvhG/

配置に関しては、これは CSS で行うことができます。

ul li
{
    float:left;
    text-align:center;
}

ul li:first-child
{
    text-align:left;
}

ul li:last-child
{
    text-align:right;
}

デモを参照してください: http://jsfiddle.net/rwvhG/1/

于 2012-10-30T11:22:19.770 に答える
1

CSSで完全に行うことができます

このデモをチェックしてください: http://jsfiddle.net/Gv7fZ/

HTML:

<div class="outer">
    <img src="<put-image-url-here>">
    <div class="menu">
        <div class="menuitem">Menu 1</div>
        <div class="menuitem">Menu 2</div>
        <div class="menuitem">Menu 3</div>
        <div class="menuitem">Menu 4</div>
    </div>
</div>

CSS:

.outer {
    margin: auto;    
    display: table-cell;
}
.menuitem {
    float: left;
    text-align: center;
    width: 33%;
}
.menuitem:first-child {
    text-align: left;  
    width: 16%;    
}
.menuitem:last-child {
    float: right;
    text-align: right;   
    width: 16%;
}
于 2012-10-30T14:46:30.633 に答える
1

css を使用して 25% の幅を設定できますが、メニュー項目のテキスト幅が大きく異なる場合、これはうまく機能しません。本当に正確にしたい場合は、次のことを試してください。

HTML

<ul class="menu">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
</ul>​

JavaScript

$(document).ready( function( ) {

    var widths = 0;
    var items = $(".menu > li");
    var menu_width = items.eq(0).parent().width();

    // total width of all existing li
    items.each( function( ) {
        widths += $(this).width( );
    });        

    var gap = parseInt( ( menu_width - widths ) / ( items.length - 1 ) );

    // set widths of list items except for last one. Last li gets pushed to edge
    items.slice( 0, -1 ).each( function( ) { 
        $(this).width( $(this).width() + gap );
    });
});

ここでフィドル

ただし、メニュー項目の幅がほとんど同じ場合は、CSS を使用した方がよいでしょう。

于 2012-10-30T12:12:42.580 に答える
0

レイアウトがレスポンシブの場合は、メニュー項目をそれぞれ 25% 幅に設定し、最後の子を text-align:right に設定して、右マージンに揃えます。

#Menu ul li {text-align:left;display:inline-block;width:25%}
#Menu ul li:last-child {text-align:right}
于 2012-10-30T11:23:28.573 に答える