Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Two unordered list side by side

I have two unordered list and I am trying to place them side by side. This works in Firefox, Safari and Chrome & IE8. But not IE 7 or compatibility mode.

Here's the markup:

<span>
   <ul style="list-style-type: none; display: inline-block;">
      <li>1</li>
      <li>2</li>
   </ul>

   <ul style="list-style-type: none; display: inline-block;">
      <li>3</li>
      <li>4</li>
   </ul>
<span>

Basically the expected is:

1  3
2  4
like image 611
Gabe Avatar asked Jun 24 '11 18:06

Gabe


People also ask

How do I align a list side by side in HTML?

To change the direction of the list, we target the unordered list element using the “ul” CSS selector. Next, we add the CSS list-style property and set the value to none. This effectivity removes the bullets on the list items. Secondly, we will now target the list items within the unordered list.

What are the 3 types of unordered list?

There are three types of lists in HTML: Unordered list or Bulleted list (ul) Ordered list or Numbered list (ol) Description list or Definition list (dl)


3 Answers

In IE6/7, display: inline-block only works on elements that are naturally inline (e.g. span).

For block-level elements (such as ul), you have to whip it into shape:

See: http://jsfiddle.net/yw8uZ/

ul {
    display: inline-block;
    *display: inline;
    zoom: 1
}

I've gone into more detail about this in the past, see: Inline block doesn't work in internet explorer 7, 6

like image 100
thirtydot Avatar answered Sep 24 '22 06:09

thirtydot


IE 7 doesn't deal with inline-block properly. See http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html for details, but in brief, add the following styles to your lists:

zoom:1; *display: inline; _height: 30px;
like image 43
George Cummins Avatar answered Sep 26 '22 06:09

George Cummins


You could float them.

   <ul style="width:10%; float:left;">
      <li>1</li>
      <li>2</li>
   </ul>

   <ul style="width:10%; float:left;">
      <li>3</li>
      <li>4</li>
   </ul>

http://jsfiddle.net/jasongennaro/K3xcg/

like image 41
Jason Gennaro Avatar answered Sep 23 '22 06:09

Jason Gennaro