inside div automatic fit width of li in ie

10,041

Solution 1

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.

Solution 2

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.

Solution 3

I would suggest styling the navigation "like" a table :

Containter div - display: table; equilivent to <table>
List containter - display: table-row; equilivent to <tr>
List Items - display table: table-cell; equilivent to <td>

Padding on the <a> element style is just to even the spacing and can be adjusted as needed, the cell items work out the remaining width and use it up relative on the cell sizes.

Working on FF / Chrome / Safair /IE 9 & 8

IE7 and below you will need to use a floating solution!

Working example:

<html>
<head>
    <title>test</title>
    <style type="text/css">

        div {
            margin: 0 auto 0 auto;
            width: 954px;
            height: 36px;
            border: 1px solid #000000;
            display: table;
        }

        ul {
            width: 100%;
            display: table-row;
            list-style: none;
            height: 100%;
        }


        li {
            display: table-cell;
            white-space: nowrap;
            border: 1px solid #00ff00;
            color: #ff0000;
        }

        a {
            text-align: center;
            display: block;
            padding: 0 15px;
            line-height: 36px;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li><a>Item1</a></li>
            <li><a>Long Item 2</a></li>
            <li><a>Very Long Item 3</a></li>
            <li><a>Even longer example Item 4</a></li>
            <li><a>Item5</a></li>
            <li><a>Item6</a></li>
            <li><a>Medium Item7</a></li>
            <li><a>Item8</a></li>
        </ul>
    </div>
</body>

10,041

dave

lOVE tO rESEARCH oN nEW cHALLENGES

Updated on June 04, 2022

Comments

dave almost 2 years
```
<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
dave over 13 years

problem is not with the div, it's with the li. li must get it's own width depending on the data size.
Badr Hari over 13 years

What is it doing then right now? It's really hard to understand what you actually trying to achieve... try to make it more clear.
dave over 13 years

Thanks MaTheCat, but there are events triggered on click of the li, so results are show according to that.
dave over 13 years

Li is suppose to display items on same line , which is happening in firefox by using float:left but not in ie. the problem is that LI must take width automatic according to it's content otherwise shift to the next line.
Jon Adams about 12 years

display: table doesn't work in older browsers, so this solution is only helpful in a few scenarios. Though you do get +1 for keeping a semantic HTML structure.
Kevin Andrews about 12 years

Thanks Jon, I just tested in IE using F12 and changing back the compatibility, IE7 and backwards don't support the display: table*; css options.