4

アイデアは、一定量のアイテムでメニューを作成することです。各アイテムには、周囲に境界線を配置するときに見栄えを良くするために、固定のパディングが必要です。（これまでのところは良い）しかし、これらのアイテムは、固定サイズの div に均等に配置する必要があります。アイテム自体は、これらのアイテム内のテキストに依存するため、同じサイズにはなりません。

私が理解できないのは、アイテムが固定div（私の場合は1000px）内で動的（多かれ少なかれ）均等な間隔で1行にあることを確認する方法です。最初の項目は、div の左端に並べる必要があります。最後の項目は、div の右端に並べる必要があります。

以下は私がこれまでに持っているものです。これはすでにパディングとボーダーを配置していますが、マージンを設定することはできません: 0 auto は設定できますが、何もしません。主な問題は、ブラウザをズームするとアイテムがジャンプする傾向があり、外側のアイテムの配置が乱れ、一部のアイテムが次の行にジャンプすることさえあるため、間の間隔は動的でなければならないことです。そういうわけで（ズームは物事を台無しにします-特に固定幅の場合）、各アイテムに実際の幅を設定することに消極的です（margin：0 autoを適切に使用するには幅が必要であることは知っていますが、幅を使用する場合でも、私がやりたいことをしていないようです）。

<div id="navigation">
    <ul>
        <li class="menu-1"><a href="" >Home</a></li>
        <li class="menu-2"><a href="" class="">Nieuws</a></li>
        <li class="menu-3"><a href="" class="">Producten</a></li>
        <li class="menu-4"><a href="" class="">Algemene informatie</a></li>
        <li class="menu-5"><a href="" class="">Promoties</a></li>
        <li class="menu-6"><a href="" class="">Algemene voorwaarden</a></li>
        <li class="menu-7"><a href="" class="">Contact</a></li>
    </ul>
</div>

#navigation ul {
    margin:0px;
    padding:0px;
    list-style:none;
    width:1000px;   
    display:block;
}

#navigation li {
    float: left;
    display:inline;
}

#navigation li a {
    padding:10px 15px 10px 15px;
    float:right;

    display: block;
    border: 0.1em solid #dcdce9;
    color: #6d6f71;
    text-decoration: none;
    text-align: center; 
    font-size:18px;
    font-weight:bold;
}

#navigation{
    width:100%;
}
4

2 に答える 2

2

最も簡単なのは、li items の代わりにテーブルを使用することです。テーブルの幅を定義すると、セルの幅が自動的に計算されます。

幅を % で指定して均等にするか、比例的に適合させるかを選択できます。

テーブルを恐れる必要はありません。テーブルの方が簡単に作業できる場合があります。

于 2012-05-24T20:57:14.173 に答える
1

テーブル表示モードの使用：http：//jsfiddle.net/pnUdp/1/

#navigation {
    margin:0px;
    padding:0px;
    display:table;
    width:1000px;
    border-collapse: collapse;
}

#navigation ul{
    margin:0px;
    padding:0px;
    list-style:none;
    display:table-row-group;
}

#navigation li{
    display:table-cell;
    border: 0.1em solid #dcdce9;
    vertical-align: middle;
}

#navigation li a{
    padding:10px 15px 10px 15px;
    display:block;
    color: #6d6f71;
    text-decoration: none;
    text-align: center; 
    font-size:18px;
    font-weight:bold;
}

これがどのようにクロスブラウザであるかはわかりませんが...

于 2012-05-24T21:03:19.677 に答える