Question

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

我有一个包含列表项的无序列表。这些是垂直显示的，背景为交替颜色，所有背景都具有相同的宽度（由一些父母向上的固定宽度div限定）。在某些项目上，有一个列表项目指示符（list-style-type: square; list-style-position: inside;），但在大多数项目上没有。在这些列表项中有三个浮动的<div>，所有这些都只包含文本。一个需要在列表项中与左侧对齐，另外两个在右侧。第一个和右对齐<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>

Answer 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

我改变的一切是：

删除了list-style-position 添加列表样式类型：方形和背景颜色（隐藏项目符号）您可能需要一些额外的标记来支持备用行颜色。这太糟糕了吗？

Answer 2

解决方案最终是为子元素使用固定宽度，并以稍微不同的方式构造内容。有些事情应该是可行的，不可能以你想到的方式在HTML中实现。以这种迂回的方式工作......太可怕了。

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

2 个答案: