HTML — <li>内的多个浮动块级元素

问题描述

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

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

解决方法

这个怎么样？

<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 我更改的只是：删除列表样式位置添加了list-style-type：正方形和背景色（以隐藏项目符号）您可能需要一些其他标记来支持备用行颜色。这太多了吗？ , 解决方案最终是对子元素使用固定的宽度，并且使内容的结构略有不同。某些无法正常工作的事情确实会以您认为要这样做的方式在HTML中出现。以这种about回的方式工作……太糟糕了。

html li 元素元素块级多个浮动

HTML — <li>内的多个浮动块级元素

问题描述

解决方法

相关问答