HTML - <li> 中的多个浮动块级元素答案

【问题标题】：HTML — Multiple floated block level elements within <li>HTML - <li> 中的多个浮动块级元素
【发布时间】：2011-08-23 13:55:10
【问题描述】：

我有一个棘手的问题要处理。这是场景：

我有一个包含列表项的无序列表。这些是垂直显示的，背景颜色交替，所有这些都具有相同的宽度（以固定宽度的 div 为界，几个父级向上）。在某些项目上，有一个列表项目指示器 (list-style-type: square; list-style-position: inside;)，但在大多数项目上没有。在这些列表项中有三个浮动的<div>s，它们都只包含文本。一个需要在列表项中左对齐，另外两个右对齐。第一个和右对齐的<div> 需要有一个固定的宽度，以防止包含的文本溢出到下一行，或者超出列表项的边界。另外两个也必须具有固定宽度，因为除了特定于字体的浏览器呈现差异之外，它们的内容根本不会改变大小。

这是一个简单的文本示例：

--------------------------------------
| • <Some Text>        <text2><text3>|
|   <Some more text>...<text2><text3>|
|   <other text>       <text2><text3>|
--------------------------------------

第一项中的文本具有以下 CSS：text-overflow: ellipsis; overflow: hidden; white-space: nowrap; 以很好地控制溢出。要查看整个内容，我有一些不错的 jQuery 黑魔法让它滚动，我已经在这个上下文之外测试并证明了它。

我目前的问题是，在所有主流浏览器中，所有元素的浮动导致每个列表项都没有高度，除了带有列表指示符的那些（list-style-type）。在列表项内容的末尾添加一个 clearfix div 会导致内容以全宽显示在列表项指示器下方的一行：

--------------------------------------
| •                                  |
| <Some Text>        <text2><text3>  |
--------------------------------------

如果第一个文本不必设置固定宽度，一切都会很容易（我的布局已经这样工作了），但它必须这样做。

为了您的享受，这是一个有效的 HTML 示例，准确地说明了我的问题：

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en'>
<head>

    <title>HTML List Problem</title>

    <style type="text/css">
        #container { width: 420px; }

        #container ul {
            list-style-type: none;
            margin: 0;
            padding: 0 20px;
            background: green;
        }

        .item { padding: 5px 0 4px 20px; }

        .item-current {
            list-style-type: square;
            list-style-position: inside;
        }

        .item-even { background: yellow; }
        .item-odd { background: orange; }

        .text1 {
            width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            float: left;
        }
        .text2, .text3 {
            float: right;
            width: 30px;
        }


    </style>

</head>

<body>

<div id="container">
    <ul>
        <li class="item item-current item-even">
            <div class="text1 item-current">
                Some Text
            </div>
            <div class="text2">
                text2
            </div>
            <div class="text3">
                text3
            </div>
        </li>
        <li class="item  item-odd">
            <div class="text1">
                Some Text
            </div>
            <div class="text2">
                text2
            </div>
            <div class="text3">
                text3
            </div>
        </li>
        <li class="item item-even">
            <div class="text1">
                Some Text
            </div>
            <div class="text2">
                text2
            </div>
            <div class="text3">
                text3
            </div>
        </li>
        <li class="item  item-odd">
            <div class="text1">
                Some Text
            </div>
            <div class="text2">
                text2
            </div>
            <div class="text3">
                text3
            </div>
        </li>
    </ul>
</div>

</body>
</html>

【问题讨论】：

标签： html css block html-lists fixed-width

【解决方案1】：

这个怎么样？

<title>HTML List Problem</title> 

<style type="text/css"> 
    #container { width: 420px; }

    #container ul {
        list-style-type: none;
        margin: 0;
        padding: 0 20px;
        background: green;
    }

    .item {
     padding: 5px 0 4px 20px;
         list-style-type: square;
         color: yellow;
}

    .item-current {
        list-style-type: square;

    }

    .item-even { background: yellow; }
    .item-odd { background: orange; }

    .text1 {
        width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        float: left;
    }
    .text2, .text3 {
        float: right;
        width: 30px;
    }


</style>

一些文字文本2 文本3 一些文字文本2 文本3 一些文字文本2 文本3 一些文字文本2 文本3

我改变的只是：

删除了列表样式位置添加列表样式类型：方形和背景颜色（隐藏项目符号）您可能需要一些额外的标记来支持备用行颜色。这是不是太过分了？

【讨论】：

这绝对是在边缘......当然。我希望我能得到更多关于如何防止lis 崩溃而不用 clearfix 爆炸它们的解释。如果我无法找到正确的解决方法，那么我想我会使用它。但是，由于问题的性质，我认为这与浏览器在具有列表项标记时与没有时呈现 <li> 的方式不同有关。
问题是在 <li> 中的所有元素上都有浮动会导致它没有高度（就像没有 clearfix 的其他所有内容一样），仅添加 clearfix 会破坏 @987654325 的正确呈现@ 作为列表项，因为它在将项目指示器放置在内部时会清除它，而当它在外部时，clearfix 会将项目指示器向下推到下一个项目。这些都不是可接受的解决方案。为什么浮动不能占用空间？为什么我不能通过设置高度属性来选择是否给我的浮动高度？为什么？
好吧，好消息是我已经解决了一半的问题：我现在可以强制浏览器接受浮动的高度，这样可以防止项目折叠。这是通过将overflow: hidden; 添加到.item 声明来完成的。一旦我弄清楚列表项标记修复，我也会发布它并回答我自己的问题。
现在的问题是如何在列表项标记上设置一个浮点数，使其强制到<li>的左侧。有谁知道如何访问该元素？
从头开始，它是width: 100%; 上的#container ul。我的错。

【解决方案2】：

解决方案最终是为子元素使用固定宽度，并稍微不同地构建内容。一些本来应该起作用的事情在 HTML 中是不可能实现的，就像你想的那样。如此迂回地工作……太可怕了。

【讨论】：