CODEWITHSUNDEEP
jqueryhtmlcsshtml-lists
gabriela
gabriela

Reputation: 45

How to display a line between the items of an unorderer list that have random number of li every time

I'm doing this page that is made for the user to interact with the page and it'll have a list of pages that the user will determinate. So this list will be display in a div as an unordered list

  • about
  • location
  • runaway

    • and will have a random number of li's that will depend on the user. I want the list to have between the items a line, but in the last li in the bottom should not have any line and in the first in the top eather.

    It should look like

                                     about

                                    location

                                    runaway

    in my css I have:

    li { border-bottom: 1px solid rgba(255,255,255,0.6); padding-bottom: 5px;}

    anyone knows how to do this? thanks!

    Upvotes: 1

    Views: 6508

    Answers (7)

    OJFord
    OJFord

    Reputation: 11130

    You can also do this with a pseudo-element:

    li:nth-child(even):before{
    content: '';
    width: 100%;
    float: left;
    clear: both;
    height: 1px; /* border width */
    background-color: rgba(255,255,255,0.6);
}

    Upvotes: 0

    Shrini
    Shrini

    Reputation: 1

    $('li:not(:last)').css({
 'border-bottom": '1px solid black', 
 'padding-bottom": '5px'
}​)​​​​​​​​​​​​​​​​​​​​;​

    Upvotes: 0

    Thomas
    Thomas

    Reputation: 759

    How about using this jQuery to apply the css class?

    $('li:not(:last)').addClass('test');

    find an example here:

    http://jsfiddle.net/umupX/7/

    Note: I've tried to use the css supplied by you. It seems to be failing in IE8 due to unsupported 'rgba' Note2: I've tested the above in IE, Chrome and Firefox successfully (I would have prefered a pure css solution http://jsfiddle.net/8NZ2s/ but that one was failing in IE8)

    Upvotes: 2

    Assaf Adato
    Assaf Adato

    Reputation: 237

    you can also try this:

    ul {
    overflow: hidden;
    list-style: none outside none;
    padding: 0;
}

li {
  border-bottom: 1px solid #D7DFE4;
  overflow: hidden;
  padding: 10px 0;
  vertical-align: top;
  margin: 0 0 -1px;
}

    it basically hides the last divider using overflow:hidden and margin-bottom:-1

    Upvotes: 0

    Neil
    Neil

    Reputation: 55392

    Some browsers support + but not :last-child, so in that case you can do this:

    li + li {
  border-top: 1px solid rgba(255,255,255,0.6);
  padding-top: 5px;
}

    This means that the first list item doesn't get a top border.

    Upvotes: 2

    Naftali
    Naftali

    Reputation: 146310

    you can do that with css:

    li:first-child {*css for first li item*/}
li:last-child {/*css for last li item*/}

    Upvotes: 0

    Stephen Walcher
    Stephen Walcher

    Reputation: 2575

    Use the CSS property :last-child. Also, see this post for more.

    Upvotes: 2

    Related Questions