0

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

我有一个包含列表项的无序列表。它们垂直显示，背景颜色交替，所有这些都具有相同的宽度（以固定宽度的 div 为界，几个父级向上）。在某些项目上，有一个列表项目指示符 ( list-style-type: square; list-style-position: inside;)，但在大多数项目上没有。在这些列表项中有 3 个 float <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>
4

2 回答 2

0

这个怎么样？

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

    Some Text text2 text3 Some Text text2 text3 Some Text text2 text3 Some Text text2 text3

All that I changed was:

removed the list-style-position added list-style-type: square and background color (to hide the bullet) You'll probably need some additional markup to support the alternate row color. Is this too much of a hack?

于 2011-06-22T00:27:32.450 回答
0

The solution ended up being to use fixed widths for the sub-elements, and to structure the content slightly differently. Some things which should work just aren't possible do pull off in HTML that way you'd think of doing it. Working in such a roundabout manner... It's terrible.

于 2011-08-23T05:55:10.827 回答