0

ネストされたリストを他のすべてのものと並べるのに少し問題があります。http://grrr.dontmeshwithus.com/ご覧 のとおり、下部のネストされたリストは、上の黒い線または div の「スライドショー」と一致していません。外側のリストの左右両側に小さな隙間があります。ブラウザ ウィンドウのサイズを変更すると、問題をより明確に確認できます。

これに対処するためのトリックや方法はありますか？ギャップを取り除くことができる唯一の方法は、CSS3 列を使用することでしたが、それらはクロスブラウザーでは機能しません.クロスブラウザーで機能させる方法はありますか? または、リスト項目に内側のマージンのみを与える別の方法はありますか? または、CSS3 列を使用して IE のフォールバックを作成する必要があります..?

HTML:

<article id="memberContainer">
    <ul id="memberList">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
 </article>

CSS(/LESS):

 @columns: 12;
 @column-width: 81;
 @gutter-width: 19;
 @total-width: 100%;

    #memberContainer {
    .border;
    ul#memberList {
      .row(9);
      li {
        .column(3,9);
        margin-top: 1em;
      }
    }
  }

私が使用しているセマンティック.gs グリッドは、 https ://github.com/twigkit/semantic.gs/blob/master/stylesheets/less/grid.less にあります。

ありがとう

4

2 に答える 2

1

:first-of-type および :last-of-type css3 セレクターはいつでも試すことができます。これにより、マージンを削除するために最初と最後の li 要素にアクセスできるようになります。

このようなもの（少ない）

ul#memberList {
    li{
        &:first-of-type, &:last-of-type{
             margin-left:0; 
             margin-right:0;
        }
    }
}

ref: http://www.w3.org/TR/selectors/#first-of-type-pseudo 最後の型はそのすぐ下にあります。

編集：ラップされたリストをレンダリングしているため、行ごとの要素数を事前に知っている場合にのみこれを行うことができます. nth-child http://www.w3.org/TR/selectors/#nth-child-pseudoまたは nth-of-type http://www.w3.org/TR/selectors/#nth- of-type-pseudoセレクター。

何かのようなもの

ul#memberList {
    li{
        &:nth-of-type(3n){
             margin-left:0; 
             margin-right:0;
        }
    }
}

あなたのニーズに対応する必要があります。

于 2012-04-22T14:15:12.877 に答える
0

試してみましたか:first-child( :last-childhttp://www.quirksmode.org/css/firstchild.html)

私はそれが次のようなものになると思います：

ul#memberList {
    li{
        &:first-child, &:last-child{
             margin-left:0; 
             margin-right:0;
        }
    }
}
于 2012-04-22T15:41:21.557 に答える