4

1 つの要素から、1 つは左揃え、もう 1 つは右揃えの 2 列の積み上げリストを作成するにはどうすればよい<UL>でしょうか? これまでのところ、要素をブロック レベルの要素のように積み重ねる必要がある場合にのみ、要素を隣り合わせにフロートさせることができます。

望ましいレイアウト (PSD から):

ご希望のレイアウト

私がこれまでに持っているもの: 現在のレイアウト HTML:

<nav>
    <ul class="top_nav">
        <li class="group_a"><a href="#">Hitched</a></li>
        <li class="group_a"><a href="#">Hatched</a></li>
        <li class="group_a"><a href="#">Hello</a></li>
        <li class="group_b"><a href="#">Our Story</a></li>
        <li class="group_b"><a href="#">Details</a></li>
        <li class="group_b"><a href="#">Readymade</a></li>
    </ul>
</nav>



CSS (SCSS):

header {
    padding-top: $row / 4;
    padding-left: $cols*2 - $gut;
    padding-right: $cols*2 - $gut;
    padding-bottom: $row / 3;
    .top_nav {
        .group_a {
            display: inline-block;
            float: left;
        }
        .group_b {
            display: inline-block;
            float: right;
        }
    }
}
4

2 に答える 2

2

html 要素をそのようgroup_aに並べ替えてgroup_b交互に配置できる場合clearは、これを実現するために使用できます。

HTML

<nav>
    <ul class="top_nav">
        <li class="group_a"><a href="#">Hitched</a></li>
        <li class="group_b"><a href="#">Our Story</a></li>
        <li class="group_a"><a href="#">Hatched</a></li>
        <li class="group_b"><a href="#">Details</a></li>
        <li class="group_a"><a href="#">Hello</a></li>
        <li class="group_b"><a href="#">Readymade</a></li>
    </ul>
</nav>

SCSS

nav {
    padding-top: $row / 4;
    padding-left: $cols*2 - $gut;
    padding-right: $cols*2 - $gut;
    padding-bottom: $row / 3;
    .top_nav {
        .group_a {
            display: inline-block;
            float: left;
            clear: both;
        }
        .group_b {
            display: inline-block;
            float: right;
        }
    }
}

デモ

于 2013-03-18T04:04:42.677 に答える
1

または、 forとforfloat: left;のみを設定できます。.group_atext-align: right;.group_b

CSS

.group_a {
  clear: both;
  float: left;
}
.group_b {
  text-align: right;
}

実施例

これにより、注文を変更する必要がなくなりますli。lte IE7 ではいくつかの問題が発生する可能性があることに注意してください。

于 2013-03-18T08:19:49.537 に答える