• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 245
  • Last Modified:

Another Unordered List (UL) CSS Question

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?
0
erzoolander
Asked:
erzoolander
1 Solution
 
Greg AlexanderLead DeveloperCommented:
Something like this:
<style>
#unorder li{
	list-style:none;
}

#unorder .cells{
	float:left;
	min-width:200px;
}

#unorder .break{
	clear:both;
}
</style>
<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>
    
</ul>

Open in new window

0
 
Jagadishwor DulalBraces MediaCommented:
Quick way to do is

CSS:
.list{
	list-style:none;
	float:left;
}

Open in new window



HTML :

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

Open in new window

0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now