html - 列表视图 css 中的问题

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 属性的编号，然后将剩余的空 <li>&nbsp;</li>放在最后一行。

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

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

Answer 2

如果js没问题这里是动态解决方案。jsfiddle 它首先查看有多少li适合一行，然后查看最后一行以查看缺少多少。li最后它根据 a 的大小和缺少的数字在右侧添加一个填充

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>