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 fir开发者_开发知识库st 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
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.
You've got several ways to do what you want:
- As MatTheCat says,
display: inlinewith onedisplay: blockwill work - Similarly,
float: left;on all but the second will also do the trick - Set them all to
display: inlineand 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.
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>
Float the div, it should help...
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> ?
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;
}
加载中,请稍侯......
精彩评论