0

スタイルを使用して水平ナビゲーション バーを作成したのですが、大きな問題が発生しました...<li>はブロック要素であるため、 を使用しtext-align:rightて配置できず、適切に配置できません。list-item 要素の構文を使用してみましたdisplay:inline;が、どちらも違いはありません (実際には意味があります)。

私の質問は、水平方向<li>を使用せずに整列させる方法はありますfloat:right;か? 現在のリストの形式 (親の div に合うように調整しました) に合わせたいのですが、float を使用することは実際には良い方法でも安全な方法でもありません。これまでに取得したもののスクリーンショットを次に示します (最近画像を追加したため、レイアウトが少し乱れています)。ご覧のとおり、「マイページ」と「ログアウト」を適切に配置することができましたが、すぐに「複雑な」ものを追加します (通常のリストに配置された「+」など)。 、それは台無しになります... 他のWebサイトがこれを正しく行う方法が本当にわかりません。

4

2 に答える 2

1

包含要素text-align: rightに対して定義する必要があります

HTML:

<ul class="nav">
    <li class="menu">1</li>
    <li class="menu">2</li>
    <li class="menu">3</li>
    <li class="menu">4</li>
    <li class="menu">5</li>
</ul>

CSS:

.nav {
    text-align: right;
}

.menu {
    display: inline;
}

JSFiddle

必要に応じて、メニューを左右に分割できます。必要に応じてパディングとマージンを追加または削除します

HTML:

<ul class="nav left-nav">
    <li class="menu">1</li>
    <li class="menu">2</li>
    <li class="menu">3</li>
</ul>
<ul class="nav right-nav">
    <li class="menu">4</li>
    <li class="menu">5</li>
</ul>

CSS:

.nav {
    margin: 0;
    padding: 0;
}

.left-nav {
    text-align: left;
}

.right-nav {
    text-align: right;
}

.menu {
    display: inline;
}

JSFiddle

于 2013-10-22T20:23:07.720 に答える