Question

我想有以下结构。

_________________________________

     1      2       3       4
_________________________________

     5      6       7       8
_________________________________

     9      10

但我无法得出最后一行。我的产出是:

_________________________________

     1      2       3       4
_________________________________

     5      6       7       8
__________________

     9      10

http://jsfiddle.net/tmp38/“rel=“nofollow” http://jsfiddle.net/tmp38/。

请提供帮助。

Answer 1

if js is no problem here is a dynamic solution. jsfiddle it first looks how many li fits in a row and then looks at the last row to see how many are missing. lastly it adds a padding to the right based on the size of a li and the number missing

Answer 2

检查一下是否无利属性,你想在第一行显示,然后把剩余的空位放在<代码><li> </li>。

页: 1

Check it : http://jsfiddle.net/varunk007/EMG2F/5/

Answer 3

你们要么必须增加空白内容,如:

<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;
}

传真

<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;
}

传真:

<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>

友情链接