0

私は現在、自分のウェブサイトのナビゲーション バーを作成しようとしています。そのためにリストを使用していますが、正しく並べ替えることができません。

私のサイトの名前を左にぶら下げ、中央に 3 つのリスト、次に右に 1 つぶら下げようとしています。

中央の 3 つを正しく取得できますが、外側の 2 つのリストを取得できません。

空白を追加するなど、リストの間隔を変える方法はありますか?

ここに私がこれまでに持っているものの例があります。http://jsfiddle.net/DnvLt/2/

私のコードは次のとおりです。

#navbar ul { 
margin: 0; 
padding: 5px; 
list-style-type: none; 
text-align: center; 
background-color: #000;
} 

#navbar ul li {  
display: inline; 
} 

#navbar ul li a { 
text-decoration: none; 
padding: .2em 1em; 
color: #fff; 
background-color: #000; 
} 

#navbar ul li a:hover { 
color: #000; 
background-color: #fff; 
}
4

1 に答える 1

1

あなたはこのようにすることができます

<ul style="overflow:hidden; list-style-type: none;">
    <li style="float:left;">Left</li>
    <li style="float:right;">Right</li>
    <li style="overflow:hidden; display:block; width:300px; margin:0 auto;">
        <ul style="list-style-type: none;">
            <li style="float:left;">element 1</li>
            <li style="float:left;">element 2</li>
            <li style="float:left;">element 3</li>
        </ul>
    </li>
</ul>

最初にすべての要素を 1 つのブロック (div) にラップし、次に左右の要素をフロートで配置し、最後に中央の要素をフロートされた要素の中央に静的に配置します。

要素を中央に配置するには、静的な幅とmargin:0 auto;

フロートする要素がオーバーフローしないようにオーバーフローがあります:)

于 2013-06-25T05:16:06.483 に答える