1

ここにこのhtmlがあります

<ul>
    <li><a href="#">home</a></li>
    <li><a href="#">tours</a></li>
    <li><a href="#">mission</a></li>
    <li><a href="#">contact</a></li>
    <li><a href="#">resources</a></li>
    <li><a href="#">explorers</a></li>
</ul>

最初の 3 つを取り、左の列に左に浮かせ、最後の 3 つを右に浮かせようとしています。私はそれを機能させることができません。それらはすべてずれており、正しい順序で表示されません。CSS を次のようにマークアップしました。

li:nth-child(-n+3) {float: left;}, 
li:nth-child(n+4) {float: right;}

私は何が欠けていますか？ありがとう！

HTMLリンクを追加するために編集されました: HERE IS THE PAGE

4

2 に答える 2

0

CSS3の列を少しいじりました。実際、これは驚くほど簡単です。

ul {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;

    -moz-column-gap: 0;
    -webkit-column-gap: 0;
    column-gap: 0;
}

基本的に、最初のリスト項目が最初の列に配置され、他の項目が2番目の列に配置されるように、包含リストに2つの列を定義します。デフォルトでは、ブラウザは列間の間隔を約に設定しているため、そのスペースを折りたたむには1em、これもに設定する必要があります。0

ご想像のとおり、これに対するブラウザのサポートは、Firefox 1.5以降、Safari 3以降、Chrome、IE10、Opera11.1以降などの最新のブラウザに限定されています。

column-break-before列間のバランスを調整する場合は、特定の要素の前に列を強制的に分割するために使用できます。たとえば、最初の列に2つのアイテムだけを入れ、残りを2番目の列に入れたい場合は、次のスニペットを追加できます。

li:nth-child(3) {
    -moz-column-break-before: always;
    -webkit-column-break-before: always;
    column-break-before: always;
}

column-break-before残念ながら、執筆時点では、Safari 3以降、Chrome、IE10、およびOpera11.1のみがサポートされています。Firefoxはまだこの機能を実装していません。

于 2012-09-28T19:19:00.487 に答える
0

確かに n 番目の子を使用できます。これは私が最近遭遇した例です。いくつかの画面幅に合わせて設定され、それに応じて調整されます: http://codepen.io/bradfrost/full/xkcBn

単純な順序なしリストを使用します。

于 2014-05-01T15:21:34.353 に答える