Another Unordered List (UL) CSS Question

Posted on 2011-04-24
Last Modified: 2012-06-21
I have an unordered list with items that need to be formatted as follows:

Item Year                        Item Name                                      Item Price
Item 2 Year                     Item 2 Name                                   Item 2 Price
Item 3 Year                     Item 3 Name                                   Item 3 Price

...and so on.

Basically - it's kind of like there was a table - with 3 columns...but instead of using a table it's using a UL with LI tags.

How would you create that in CSS?
Question by:erzoolander
    LVL 18

    Expert Comment

    by:Greg Alexander
    Something like this:
    #unorder li{
    #unorder .cells{
    #unorder .break{
    <ul id="unorder">
    	<li class="cells">Item Year</li>
        <li class="cells">Item Name</li>
        <li class="cells">Item Price</li>
        <li class="break"></li>
        <li class="cells">Item 1 Year</li>
        <li class="cells">Item 1 Name</li>
        <li class="cells">Item 1 Price</li>
        <li class="break"></li>
        <li class="cells">Item 2 Year</li>
        <li class="cells">Item 2 Name</li>
        <li class="cells">Item 2 Price</li>

    Open in new window

    LVL 15

    Accepted Solution

    Quick way to do is


    Open in new window

    HTML :

    <ul class="list">
    	<li>Item Year</li>
        <li>Item 2 Year  </li>                                                          
       <li> Item 3 Year </li>
       <ul class="list">                                                  
        <li>Item Name</li>  
        <li>Item 2 Name </li>                                              
        <li>Item 3 Name </li>
        <ul class="list">
        <li> Item Price</li>
        <li>Item 2 Price</li>
        <li>Item 3 Price</li>

    Open in new window


    Featured Post

    Why You Should Analyze Threat Actor TTPs

    After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

    Join & Write a Comment

    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
    In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now