15

私は3つの列に表示されるリストを作成しています。すべて<li>に次のborder-bottomようなものがあります:

x | x | x
---------    
x | x | x
---------      
z | z | z
---------  

<ul>
    <li>x</li><li>x</li><li>x</li>
    <li>x</li><li>x</li><li>x</li>
    <li>z</li><li>z</li><li>z</li>
</ul>

私がやりたいのはborder-bottom、最後の 3 行の を削除する nth-child 式を作成することです。したがって、上記の例では次のようになります。

ul li:nth-child(-n+6) {
    border-bottom:0;
}

問題

ただし、少し複雑なのは、リスト内のアイテムの量がさまざまであるため、次のシナリオのいずれかが発生する可能性があることです。

シナリオ 1

x | x | x
---------   
x | x | x
---------   
z |
---  

<ul>
    <li>x</li><li>x</li><li>x</li>
    <li>x</li><li>x</li><li>x</li>
    <li>z</li>
</ul>

シナリオ 2

x | x | x
---------   
x | x | x
---------   
z | z |
-------

<ul>
    <li>x</li><li>x</li><li>x</li>
    <li>x</li><li>x</li><li>x</li>
    <li>z</li><li>z</li>
</ul>

シナリオ 3

x | x | x
---------   
z | z |
-------

<ul>
    <li>x</li><li>x</li><li>x</li>
    <li>z</li><li>z</li>
</ul>

結論

私の目的は、スタイルが適用されないようにborder-bottom、常に最後の行 (またはこの例では文字z )を削除することです。

理想的な解決策は次のとおりです。

ul {
    padding-bottom:-20px;
}

ただしpadding-bottom:-#px;、CSS ではサポートされていません。

これを行うために考えられる唯一の他の方法は、最後の行ではない 3 を含む行のみをキャプチャする nth-child 式を作成することですか?

それを適用する量を探すには、何らかの3で割る必要があるのではないでしょうか?

4

5 に答える 5

32

これまで、最後の行にスタイルを適用するセレクターを作成しました

/* all the cells */
li {
   background: #ccc;
}

/* last row, doesn't matter how many cells */
li:nth-last-child(-n + 3):nth-child(3n + 1), /* first element of the last row */
li:nth-last-child(-n + 3):nth-child(3n + 1) ~ li /* all its following elements */
{
   /* reset the style, eg: */
   background: transparent;
}

ここで実際の例を見ることができますhttp://jsbin.com/ufosox/1/edit

もちろん、これはIE8以下をサポートしていません。

于 2012-10-02T15:33:31.103 に答える
10

n番目の式の代わりに、単純なcssソリューションで十分でしょうか？

border-bottomをすべてのLIに設定し、 overflow：hiddenをULに設定します。次に、すべてのLIを1px下に移動して、最後の行が非表示になるようにします。

例： http： //jsfiddle.net/willemvb/7uGRq/

于 2012-10-15T13:19:02.867 に答える
4

疑似クラスのみを使用して目的の結果を達成する方法が見当たらないのでnth-*、私は創造的になろうとしました: リスト項目の高さがすべて同じである場合(たとえば、仮定30px)、css のみを含む回避策をこれで実行できます。仕方

http://jsbin.com/ukubug/4/edit

CSS

ul { list-style: none;  
     margin: 3em 0 0 0; padding: 0;
     height: auto; overflow: hidden; 
     position : relative;
}

li { float: left; width: 30px; height: 30px; 
     position: relative; z-index: 1;
     text-align: center; line-height: 30px;  /* just to h/v centering */
}

li:nth-child(3n+1) { clear: left }


ul:before {
   position: absolute;
   z-index : 1;
   content : "";
   display : block;
   background : #f00;
   left    : 0;
   top     : -30px;  /* this is the height of your list-items */
   width   : 100%;
   height  : 100%;
}

秘訣は、疑似要素に背景色を適用し、絶対位置を指定してから、高さul:beforeに等しい負の上部オフセットを適用することです。li

overflow : hidden適用先はul、クリア方法としても、親境界の外側に配置された赤いレイヤーをカットするためにも機能します。同時にli要素も配置する必要があるため、要素が重なる可能性がありul:beforeます。

li要素が4 つ未満の場合、強調表示効果が表示されないことに注意してください(最初の行が最後の行でもあるため): 常に少なくとも 1 行(部分的に塗りつぶされているかどうかにかかわらず)を強調表示する必要がある場合は、

min-height : 60px;  /* double height of a li element */

にul:before。

それが役立つことを願っています。

最終的な考慮事項として、このソリューション自体にも注意してください(*)

  • 上でも正常に動作するはずですが、疑似クラスにIE8依存するソリューションはその疑似ブラウザnth-*では機能しません
  • 2/4/5/6/... 列レイアウトに切り替えると、簡単に拡張できます。

(*)まあ、これにはもちろん、li 要素の aclear: leftを取得する別の方法が必要です :)3n+1

于 2012-10-02T13:58:07.747 に答える
0

HTMLコード自体にアクセスできるかどうかはわかりませんが、アクセスできる場合、私の完璧な解決策は、ulの後に別のhtml divを追加し、背景色を白、高さを30px、上またはマージンにすることです-top of -30px (または ul の最後のチャンクを非表示にするために必要なもの)

<ul>...</ul>
<div style="background-color: #fff; height: 30px; margin-top: -30px">&nbsp;</div>

別のメモ、あなたは padding-bottom を試しましたが、margin-bottom: -20px を試しましたか?

于 2012-10-14T09:54:31.953 に答える
-2

すべてのliにスタイルを適用してから、最後のものに特定のルールを適用することをお勧めします:

ul li:last-child {
    background-color:#FF0;
}

:last-child は IE LTE 8 と互換性がないことに注意してください ( http://www.quirksmode.org/css/contents.html )

于 2012-10-02T13:37:28.903 に答える