div里面的div自动适合宽度

时间:2010-10-22 07:30:03

标签: html css dhtml css-float

<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根据数据大小获得自己的宽度。

提前致谢

6 个答案:

答案 0 :(得分:5)

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

选项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;这将有助于了解您需要支持哪些。

答案 1 :(得分:1)

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

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

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

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

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

答案 2 :(得分:1)

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

  • 包含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>

答案 3 :(得分:0)

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

答案 4 :(得分:0)

我认为最好的方法是申请

li { display:inline; }

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

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

答案 5 :(得分:0)

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

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

相关问题