Html ie中li的内部div自动拟合宽度一行中的一些文本一行中的一些文本一些文本2行大约2个 2_Html_Css_Dhtml_Css Float

Html ie中li的内部div自动拟合宽度一行中的一些文本一行中的一些文本一些文本2行大约2个 2

html css

Html ie中li的内部div自动拟合宽度一行中的一些文本一行中的一些文本一些文本2行大约2个 2,html,css,dhtml,css-float,Html,Css,Dhtml,Css Float,我不知道在ie中显示项目的正确css代码是什么，比如：前两个结果在第一行自动拟合，其余结果在第二行自动拟合。所以基本思想是让li根据数据大小获得自己的宽度。提前感谢您浮动div，它应该会有帮助……我认为最好的方法是申请 <div style='width:500px'> <ul> <li> some text in 1 line</li> <li> some text in 1 line</li>

我不知道在ie中显示项目的正确css代码是什么，比如：

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

提前感谢您

浮动div，它应该会有帮助……

我认为最好的方法是申请

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

并插入一个不带此规则的

，以执行换行

但是，您不能将所有数据放在一行中吗？

您有几种方法来做您想要做的事情：

正如MatTheCat所说，
```
display:inline
```
和一个
```
display:block
```
将起作用
类似地，
```
float：左也会起作用
```


将它们全部设置为display:inline
，并在第二个元素的末尾添加一个
（有点讨厌，但很简单）


但是，您最好将它们作为两个单独的列表处理。在不知道使用它的目的的情况下，很难说，但是将元素拆分将使其更具可读性，并让您更好地控制两行的位置和样式
如果目的只是让列表元素水平流动以填充div，“第一行的前两个”只是一个示例，那么只需在每个列表元素上设置display:inline

如果特别希望前两个结果的宽度为250px（div的一半），请将样式设置为float:left；宽度：50%并将剩余的diplay内联。
可能是浮动属性，可能会有所帮助




一行中的一些文本

一行中的一些文本

一些文本2行

大约2

二,






li{

浮动：左；

显示：块；
}
我认为有两种方法可以实现您的要求：
备选案文1：
使
标签显示：块，和浮动：左
备选案文2：
使
标记显示：内联块和空白：nowrap
我自己也会选择选项2，因为它可以避免你在花车上遇到的怪癖。此外，您可能会发现您最终需要nowrap，即使使用选项1
[编辑]
您可能还需要设置
标记的样式。可能宽度：100%和/或显示：块
我仍然说display:inline块和空白：nowrap
应该为
标记执行此操作。但是如果它不起作用，如果你说它以什么方式不起作用，那会有帮助
另外：你也一直在说一些答案在IE中不起作用，但你没有说哪个版本的IE——IE6、7、8和9对CSS的支持程度非常不同；了解您需要支持哪些导航会有所帮助。
我建议将导航设置为“类似”表格：

集装箱舱-显示：表格；与
列表容器-显示：表格行；与
列表项-显示表格：表格单元格；与

元素样式上的填充只是为了均匀间距，可以根据需要进行调整，单元格项计算出剩余宽度，并根据单元格大小使用它
在FF/Chrome/Safair/IE 9和8上工作
IE7及以下版本需要使用浮动解决方案
工作示例：
li { display:inline; }


测试
div{
边距：0自动0自动；
宽度：954px；
高度：36px；
边框：1px实心#000000；
显示：表格；
}
保险商实验室{
宽度：100%；
显示：表格行；
列表样式：无；
身高：100%；
}
李{
显示：表格单元格；
空白：nowrap；
边框：1px实心#00ff00；
颜色：#ff0000；
}
a{
文本对齐：居中；
显示：块；
填充：0 15px；
线高：36px；
}

项目1
长项目2
非常长的项目3
甚至更长的示例项目4
项目5
项目6
中等项目7
项目8


问题不在于div，而在于li。li必须根据数据大小获得自己的宽度。它现在在做什么？真的很难理解你到底想要达到什么。。。试着说清楚一点。Li应该在同一行上显示项目，这在firefox中是通过使用float:left实现的，但在ie中不是。问题是Li必须根据其内容自动调整宽度，否则会切换到下一行。谢谢MaTheCat，但点击Li会触发一些事件，所以结果就是这样显示的。显示：当使用浮动规则时，块是无用的。@Mat：所有浮动的项目都应该是块。（使用float可能会强制执行此操作，但我始终倾向于显式）不是“应该”而是“是”：display:table在较旧的浏览器中不起作用，因此此解决方案仅在少数情况下有用。虽然保留语义HTML结构会得到+1。谢谢Jon，我刚刚用F12在IE中测试了兼容性，IE7和Backward不支持显示：table*；css选项。
<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>