<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，它应该会有所帮助...
【讨论】：
我认为最好的方法是申请
li { display:inline; }
并在没有此规则的情况下插入 <li> 以执行换行。
但是你不能把所有数据放在一个<li>的同一行吗？
【讨论】：
你有几种方法可以做你想做的事：
display: inline 和一个 display: block 将起作用float: left; 除了第二个也可以解决问题display: inline，并在第二个元素的末尾添加<br />（有点讨厌，但很简单）但是，您最好将它们视为两个单独的列表。在不知道你用它做什么的情况下，很难说，但是将元素拆分会使其更具可读性，并让你更好地控制两行的定位和样式。
如果目标只是让列表元素水平流动以填充 div 并且“第一行的前两个”只是一个示例，那么只需在每个列表元素上设置 display: inline。
如果您特别希望前两个结果的宽度为 250 像素（div 的一半），请将这两个结果的样式设置为 float: left; width: 50%;，并将其余的 diaplay 内联。
【讨论】：
浮动属性可能会有所帮助
<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;
}
【讨论】：
我认为有两种方法可以实现我认为您所要求的：
选项 1：
制作<li>标签display:block;和float:left;
选项 2：
制作<li> 标签display:inline-block; 和white-space:nowrap;
我自己会选择选项 2，因为它可以避免使用浮动时可能出现的怪癖。此外，您可能会发现您最终还是需要 nowrap，即使使用选项 1。
[编辑]
您可能还需要设置<ul> 标记的样式。也许是width:100%; 和/或display:block;。
我还是说display:inline-block; 和white-space:nowrap; 应该为<li> 标签做这件事。但如果它不起作用，如果你说它不起作用的方式会有所帮助。
另外：您也一直在说一些答案在 IE 中不起作用，但您没有说 IE 的哪个版本 - IE6、7、8 和 9 具有非常不同的级别对 CSS 的支持；了解您需要支持哪些会有所帮助。
【讨论】：
我建议将导航设置为“像”表格：
<table>
<tr>
<td>
<a> 元素样式上的填充只是为了均匀间距，可以根据需要进行调整，单元格项计算出剩余宽度并相对于单元格大小使用它。
在 FF / Chrome / Safair /IE 9 & 8 上工作
IE7及以下需要使用浮动解决方案！
工作示例：
<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>
【讨论】：
display: table 在旧版浏览器中不起作用，因此此解决方案仅在少数情况下有用。尽管您确实会因为保持语义 HTML 结构而获得 +1。