1

ulで次の構造が欲しい

_________________________________

     1      2       3       4
_________________________________

     5      6       7       8
_________________________________

     9      10

しかし、私はその最後の行を作成することができません。私の出力は

_________________________________

     1      2       3       4
_________________________________

     5      6       7       8
__________________

     9      10

このフィドルを参照してくださいhttp://jsfiddle.net/tmp38/

助けてください。

4

3 に答える 3

2

js が問題ない場合、ここに動的ソリューションがあります。jsfiddle では、最初にli行に適合する数を調べ、次に最後の行を調べて不足している数を確認します。li最後に、 a のサイズと欠落している数に基づいて右側にパディングを追加します

于 2012-05-11T07:35:47.590 に答える
2

<li>&nbsp;</li>最初の行に表示する li 属性の数を確認し、最後の行に残りの空を入れ ます。

それ以外の場合は、構造をdivに変換します。

チェックしてください： http://jsfiddle.net/varunk007/EMG2F/5/

于 2012-05-11T06:46:43.973 に答える
0

次のような空白の li 要素を追加する必要があります。

<ul class="packages">
     <li>1</li>
     <li>2</li>
     <li>1</li>
     <li>2</li>
     <li>1</li>
     <li>2</li>
     <li>1</li>
    <!--ADD BLANK -->
    <li></li>
</ul>

または、7 と 8 のカスタム クラスを設定して、下に境界線を付けます。

CSS:

.border-bottom {
        border-bottom: 1px solid #444;
}

HTML

<ul class="packages">
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
     <li class="border-bottom">7</li>
     <li class="border-bottom">8</li>
     <li>9</li>
     <li>10</li>
</ul>

これには多くの方法がありますが、何を達成しようとしているかによって異なります。ネストされた要素の例を次に示します。

CSS:

.packages li
{
    float:left;
    margin:0 0 30px 0;
    width:176px;   
    padding-top:30px;  
    border-top
    text-align:center;
}
.packages ul {
    border-top:1px solid #444;
    overflow: hidden;
    width: 352px;
}

HTML:

<ul class="packages">
 <ul>
     <li>1</li>
     <li>2</li>
 </ul>
 <ul>
     <li>1</li>
     <li>2</li>
 </ul>
 <ul>
     <li>1</li>
     <li>2</li>
 </ul>
 <ul>
     <li>1</li>
 </ul>
</ul>
于 2012-05-11T06:44:57.120 に答える