How to display a HTML List

Question

Hai, I need to display like this in HTML It should be in 2 column format

.Apple .Mango
.Orange .Banana
.Grapes

Can any one post some sample code or url Thanks in Advance

Answer 1

Take a look here...

http://www.w3.org/TR/html401/struct/lists.html

Answer 2

Hai, to make a list you do:

<list>
<item>Apple</item>
<item>Mango</item>
<item>Orange</item>
<item>Banana</item>
<item>Grapes</item>
</list>

Answer 3

You can try something like

<div style="float:left">
<ul>
  <li>List</li>
  <li>one</li>
</ul>
</div>
<div style="float:left">
<ul>
  <li>List</li>
  <li>two</li>
</ul>
</div>

Please note, that it's highly discouraged to use tables to format your webpage. (That's the reason why I removad that section) It's really better to use <div> and <span>

Answer 4

Add to your stylesheet:

li { 
    width: 50%;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
}

You'll probably want to tweak it, but that makes a reasonable starting point.

Answer 5

There are two ways to do this correctly. The HTML will stay the same in either case:

<ul class="two-col">
  <li>Apple</li>
  <li>Mango</li>
  <li>Orange</li>
  <li>Banana</li>
</ul>

Now for the CSS. First of all, you can use floats:

.two-col {
  overflow: hidden;
}

.two-col li {
  width: 130px; /* Change this to any amount you want */
  margin-right: 10px;
  float: left;
}

Or you can use the new CSS3 column property (note it is not supported on IE8 and below):

.two-col {
  column-count: 2;
  -moz-column-count: 2;
  -webkit-column-count: 2;
}

This will automatically give each column half of their original width. Fiddle around with it here: http://www.jsfiddle.net/4jLK7/