1

このコードを使用して、ブロックで構成されるナビゲーション バーを作成しようとしています。 

<nav id="mainnav">
    <ul>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
    </ul>
</nav>

そしてこのCSS 

#mainnav
{
    padding: 0px;
}

#mainnav li
{
    display:inline-block;
}

#mainnav a
{
    /* box */
    display: block;
    padding: 3px;
    width: 208px;
    margin: 2px;
    border: 1px solid rgb(85,85,85);
    /* text */
    text-align: center;
}

（フィドルを参照してください：こちら）

今のところ、1 行にできるだけ多くのボックスを並べてボックスを並べています。それが私が探していたものです。

しかし、自動マージンを挿入して、ある種の正当化されたテキストのように機能するようにする (および水平方向のスペース全体を使用する) か、ボックスを水平方向に伸ばしてスペースを埋めるようにしたいと考えています。

試してみmargin: 2px auto;ましたが、私が望むようなことは何もしません。プロパティを試しmin-widthましたが、どちらも機能しません。そして、他のいくつかのこと。

今、私はアイデアを使い果たしており、Google は私を助けてくれません。
どうすればこれを達成できますか?

4

2 に答える 2

2

これは、JQuery (または Javascript) なしでは修正できないと思います。

私はこれを作りました、それがあなたに役立つことを願っています:

HTML

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
</ul>

CSS

#nav {
    list-style: none;
    margin: 0;
    padding: 10px;
    background: red;
    width: 400px;
}
#nav li {
    display: inline-block;
    background: green;
    margin: 0; /* must be 0 on the left and right */
    padding: 0; /* must be 0 on the left and right */
    margin-right: -4px; /* delete default inline-block margin */
}
#nav li a {
    display: block;
    padding: 5px 0; /* padding-left and right must be 0 */
    margin: 5px;
    background: yellow;
}

Jクエリ

$(document).ready( function() {
    var ulWidth = $("#nav").width();

    var aTotalWidth = 0;
    var numA = 0;

    $("#nav li a").each( function() {
        var aWidth = $(this).width() 
            + parseInt($(this).css("margin-left")) 
            + parseInt($(this).css("margin-right"))
            + parseInt($(this).css("borderLeftWidth")) 
            + parseInt($(this).css("borderRightWidth"));
        aTotalWidth += aWidth;
        numA += 1;
    });

    var spaceBetween = ulWidth - aTotalWidth;
    var aPadding = Math.floor( spaceBetween / (numA * 2 ) );

    $("#nav li a").each( function() {    
        $(this).css('padding-left', aPadding);
        $(this).css('padding-right', aPadding);
    });
});

ワーキングデモ

于 2013-07-11T09:03:41.817 に答える