Search code examples
htmlcssdhtmlcss-float

inside div automatic fit width of li in ie

<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

Solution

  • 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.