0

対処するのが難しい問題があります。シナリオは次のとおりです。

リスト項目を含む順序付けられていないリストがあります。これらは縦に表示され、背景は交互の色で表示され、すべて同じ幅です (いくつかの親の上に固定幅の div で囲まれています)。一部のアイテムにはリスト アイテム インジケーター ( list-style-type: square; list-style-position: inside;) がありますが、ほとんどのアイテムにはありません。これらのリスト項目内には 3 つ<div>の float があり、そのすべてにテキストのみが含まれています。1 つは左に揃える必要があり、他の 2 つはリスト項目内で右に揃える必要があります。<div>含まれるテキストが次の行に流れ込んだり、リスト項目の境界を越えて拡張したりしないように、最初と右揃えは固定幅にする必要があります。フォント固有のブラウザー レンダリングの違いを除けば、コンテンツのサイズはまったく変わらないため、他の 2 つも固定幅にする必要があります。

簡単なテキストの例を次に示します。

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

最初の項目のテキストには次の CSStext-overflow: ellipsis; overflow: hidden; white-space: nowrap;が含まれています: オーバーフローを適切に保持するため。コンテンツ全体を表示するために、このコンテキストの外で既にテストして証明した、スクロールするための素敵なjQueryブラックマジックがあります。

私の現在の問題は、すべての主要なブラウザーで、すべての要素が浮動しているため、リスト インジケーター ( ) が付いているものを除いて、すべてのリスト項目の高さがなくなることlist-style-typeです。リスト アイテムのコンテンツの最後に clearfix div を追加すると、コンテンツがリスト アイテム インジケーターの 1 行下に全幅で表示されます。

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

    一部のテキスト text2 text3 一部のテキスト text2 text3 一部のテキスト text2 text3 一部のテキスト text2 text3

私が変更したのは次のとおりです。

list-style-position を削除 list-style-type: square と background color を追加 (箇条書きを隠すため) これはあまりにも多くのハックですか？

于 2011-06-22T00:27:32.450 に答える
0

解決策は、サブ要素に固定幅を使用し、コンテンツをわずかに異なる構造にすることでした。うまくいくはずのいくつかのことは、HTML ではあなたが考えているようにやってのけることができません。そんな回りくどい仕事… ひどい。

于 2011-08-23T05:55:10.827 に答える