Question

我想要以下带有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/

请帮忙。

Answer 1

选中要在第一行显示的li属性的no，然后将剩余的空<li> </li>放在最后一行。

否则，请使用 div 转换您的结构。

检查一下： http://jsfiddle.net/varunk007/EMG2F/5/

Answer 2

如果js没问题，这里是动态解决方案。 jsfiddle 它首先查看连续多少li，然后查看最后一行以查看缺少的数量。最后，它根据li的大小和缺少的数字

在右侧添加填充

Answer 3

您必须添加空白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>

列表视图中的问题css

3 个答案: