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

回答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.

回答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.

回答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>

回答4:

Float the div, it should help...

回答5:

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> ?

回答6:

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; }

来源：https://stackoverflow.com/questions/3994739/inside-div-automatic-fit-width-of-li-in-ie

标签

html

css

dhtml

css-float