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
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.
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)
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
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;
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With