CODEWITHSUNDEEP
htmlcsshtml-lists
Rohan Patil
Rohan Patil

Reputation: 2348

Issue in list view css

I want the following structure with ul

_________________________________

     1      2       3       4
_________________________________

     5      6       7       8
_________________________________

     9      10

But I am unable to produce that last line. My output is

_________________________________

     1      2       3       4
_________________________________

     5      6       7       8
__________________

     9      10

You refer this fiddle http://jsfiddle.net/tmp38/

Please help.

Upvotes: 1

Views: 393

Answers (3)

swati
swati

Reputation: 1757

Check the no of li attribute you want to display in first row and then put remaining empty <li>&nbsp;</li> in last row .

Else convert your structure with div .

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

Upvotes: 2

Luuky19
Luuky19

Reputation: 179

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

Upvotes: 2

Derek Gutierrez
Derek Gutierrez

Reputation: 638

You either have to add blank li elements like: 

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

Or set custom class for 7 and 8 to have border on bottom:

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>

There is many ways you can go about this, it just depends on what your trying to accomplish. Here is an example with nested elements.

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>

Upvotes: 0

Related Questions