0

順序付けされていないリスト、水平ナビゲーションバーに「margin：0 auto」を適用した後、リスト要素を中央に配置できますが、リストに含まれるアイテムはリスト内で左揃えになります。私がオンラインで見た例は、li要素を再配置する必要があることについて何も述べていないので、私は何か間違ったことをしているのではないかと思います。リストの周りに黒い境界線を配置したため、リストは実際には中央に配置されていることがわかりますが、アイテムは中央に配置されていません。

#navBarList 
{
    width: 25%;
    margin: 0 auto;
    list-style-type: none;
    overflow: hidden;
    border-width: 3px;
    border-color: black;
    border-style: solid;     
}

#navBarList li 
{
   float: left;   
}
---------------------------------

<div id="navBarDiv">
    <ul id="navBarList">
        <li>Plots</li>
        <li>Reports</li>
        <li>Map</li>
    </ul>
</div>
4

1 に答える 1

1

li要素を含むのではなく、要素に幅を与えることを意図していると思いますul。のコンテナ margin: 0 auto;内で中央に配置する場合を除いて、を削除します。li要素にも含める必要がありますが、それらをフローティングすると、アイテムのリストではなく（フローティング）ブロックとして表示されるため、重要ではないと思います。修正されたCSSは次のとおりです。ullist-style-type: none;

#navBarList 
{
    overflow: hidden;
    border-width: 3px;
    border-color: black;
    border-style: solid;     
}

#navBarList li 
{
    list-style-type: none;  
    width: 25%;
    float:left;
}​

あなたの例のJSFiddle（変更）

要素内のテキストを中央に配置する場合text-align: center;は、ルールに追加する必要がある場合もあります。#navBarList lili

編集：実際、私はリスト項目について間違っていたかもしれません。それらをクロムでフロートさせると、リストアイテムのように機能しなくなり、別のルールを考えていました（インラインアイテムはブロック要素としてフロートされます）。それについてはよくわかりません。

于 2012-08-19T03:12:36.870 に答える