Question

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

我不知道用于显示项目的正确css代码是什么，例如：

前两个结果自动适合第一行，其余结果在第二行。 所以基本的想法是让li根据数据大小获得自己的宽度。

提前致谢

Answer 1

我认为有两种方法可以达到我的想法：

选项1：制作<li>代码display:block;和float:left;

选项2：制作<li>代码display:inline-block;和white-space:nowrap;

我会自己去选项2，因为它可以避免你用浮子获得的怪癖。此外，即使使用选项1，您也可能会发现最终需要nowrap。

[编辑]

您可能还需要设置<ul>标记的样式。可能是width:100%;和/或display:block;。

我仍然说display:inline-block;和white-space:nowrap;应该为<li>代码执行此操作。但是如果它不起作用，如果你以什么方式说它不起作用会有所帮助。

另外：你也曾经说过一些答案在IE中没有用，但你还没有说IE的哪个版本 - IE6,7,8和9有非常不同的级别支持CSS;这将有助于了解您需要支持哪些。

Answer 2

你有几种方法可以做你想做的事情：

正如MatTheCat所说，display: inline只有一个display: block可以使用
同样地，float: left;除了第二个之外的所有人都会做到这一点
将它们全部设置为display: inline并在第二个元素的末尾有一个<br />（有点讨厌，但很简单）

但是，将它们视为两个单独的列表可能会好得多。在不知道你使用它的情况下，很难说，但拆分元素会使它更具可读性，让你更好地控制两条线的定位和造型。

如果目标只是让列表元素水平流动以填充div并且“第一行的前两个”只是一个示例，那么只需在每个列表元素上设置display: inline。

如果您特别希望前两个结果的宽度为250px（div的一半），请在这两个结果上将样式设置为float: left; width: 50%;，并将其余部分显示为内联。

Answer 3

我建议将导航设置为“像”表格一样：

包含div - display：table;与<table>
列表包含 - 显示：表格行;与<tr>
列表项目 - 显示表格：table-cell;与<td>

<a>元素样式的填充只是为了均匀间距，可以根据需要进行调整，单元格项目计算出剩余的宽度，并相对于单元格大小使用它。

使用FF / Chrome / Safair / IE 9＆amp; 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>

Answer 4

浮动div，它应该有帮助......

Answer 5

我认为最好的方法是申请

li { display:inline; }

并在没有此规则的情况下插入<li>以执行换行符。

但是，您不能将所有数据放在一个<li>中的同一行吗？

Answer 6

可能是浮动属性可能有帮助

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

div里面的div自动适合宽度

6 个答案: