div内自动适配ie中li的宽度
<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>
我不知道在 ie 中显示项目的正确 css 代码是什么，例如：
前两个结果自动适合第一行，其余结果自动适合第二行。 所以基本的想法是让 li 根据数据大小获得自己的宽度。
提前致谢
<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
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
我认为有两种方法可以实现您所要求的目标：
选项 1：
将
标记设置为display:block;和float:left;选项 2：
制作
标签display:inline-block;和white-space:nowrap;我自己会选择选项 2，因为它可以避免浮动带来的怪癖。此外，您可能会发现无论如何您最终都需要 nowrap，即使使用选项 1。
[编辑]
您可能还需要设置
标记的样式。也许是width:100%;和/或display:block;。我仍然认为
display:inline-block;和white-space:nowrap;应该为标签执行此操作。但如果它不起作用，如果你说它在什么方面不起作用，将会有所帮助。另外：您还说过有些答案在 IE 中不起作用，但您没有说哪个版本的 IE - IE6、7、8 和 9 对以下内容的支持程度非常 CSS；这将有助于了解您需要支持哪些。
I see two ways to achieve what I think you're asking:
Option 1:
Make the
<li>tagsdisplay:block;, andfloat:left;Option 2:
Make the
<li>tagsdisplay:inline-block;andwhite-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. Maybewidth:100%;and/ordisplay:block;.I still say
display:inline-block;andwhite-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.
您有多种方法可以实现您想要的功能：
display: block即可实现display: inlinefloat: left;< /code> 除了第二个元素之外的所有元素也可以将display: inline并在第二个元素的末尾有一个
但是，将它们视为两个单独的列表可能会更好。在不知道你用它做什么的情况下，很难说，但是将元素分开将使它更具可读性，并让你更好地控制两条线的定位和样式。
如果目标只是让列表元素水平流动以填充 div 并且“第一行前两个”只是一个示例，那么只需在每个列表元素上设置
display: inline即可。如果您特别希望前两个结果的宽度为 250px（div 的一半），请将样式设置为
float: left; width: 50%;在这两个上，其余部分内联显示。You've got several ways to do what you want:
display: inlinewith onedisplay: blockwill workfloat: left;on all but the second will also do the trickdisplay: 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: inlineon 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.我建议将导航设计为“像”表格一样：
元素样式上的
Padding 只是为了均匀间距，并且可以根据需要进行调整，单元格项目计算出剩余宽度并相对于单元尺寸使用它。适用于 FF / Chrome / Safair /IE 9 和8
IE7及以下版本您将需要使用浮动解决方案！
工作示例：
I would suggest styling the navigation "like" a table :
<table><tr><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:
浮动div，它应该有帮助......
Float the div, it should help...
我认为最好的方法是应用
并插入一个没有此规则的
来执行换行。但是您不能将所有数据放在 ONE
的同一行中吗？I think the best way is to apply
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;
}