inside div automatic fit width of li in ie

Question

Hello

<div style='width:500px'>  
<ul>  
  <li> some text in 1 line</li>  
  <li> some text in 1 line</li>  
  <li> some text 2 line</li>  
  <li> some 2</li>  
  <li> 2</li>  
</ul>
</div>

I don't know what is the correct css code for display of items in ie like:

first two results automatic fit in first line and rest of the results on second line. so basic idea is to let the li get it's own width depending on the data size.

Thanks in advance

Answer 1

Float the div, it should help...

Answer 2

I think the best way is to apply

li { display:inline; }

and insert a <li> without this rule to perform a line break.

But can't you place all data in the same line in ONE <li> ?

Answer 3

You've got several ways to do what you want:

• As MatTheCat says, display: inline with one display: block will work
• Similarly, float: left; on all but the second will also do the trick
• Set them all to display: inline and have a <br /> at the end of the second element (a bit nasty, but simple)

However, you're probably far better off treating them as two separate lists. Without knowing what you're using it for, it's hard to say, but splitting the elements up will make it more readable and let you have better control over the positioning and styling of the two lines.

If the aim is just to have the list elements flow horizontally to fill the div and "first two on first line" is just an example, then simply set display: inline on each list element.

If you specifically want the first two results to have a width of 250px (half of your div), set the style as float: left; width: 50%; on those two and have the remainder diaplay inline.

Answer 4

May be floating properties may help

<div style='width:500px; overflow: hidden;'>
<ul>
<li> some text in 1 line</li>
<li> some text in 1 line</li>
<li> some text 2 line</li>
<li> some 2</li>
<li>2</li>
</ul>
</div>

li {
float: left;
display: block;
}

Answer 5

I see two ways to achieve what I think you're asking:

Option 1: Make the <li> tags display:block;, and float:left;

Option 2: Make the <li> tags display:inline-block; and white-space:nowrap;

I'd go for option 2 myself, as it'll avoid the quirks you can get with floats. Also you may find you end up needing nowrap anyway, even with option 1.

[EDIT]

You may also need to style the <ul> tag. Maybe width:100%; and/or display:block;.

I still say display:inline-block; and white-space:nowrap; should do it for the <li> tags. But if it isn't working, it would help if you said in what way it's not working.

Also: You've also been saying some answers aren't working in IE, but you haven't said which version of IE -- IE6,7,8 and 9 have very different levels of support for CSS; it would help to know which ones you need to support.