HTML - Несколько элементов уровня блока с плавающей точкой в ​​<li>

У меня есть каверзная проблема. Вот сценарий:

У меня есть неупорядоченный список, содержащий элементы списка. Они отображаются вертикально, с фоном чередующегося цвета, все из которых имеют одинаковую ширину (ограничены 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>
Источник

2 ответа

Решение

В итоге было решено использовать фиксированную ширину для подэлементов и структурировать содержимое немного по-другому. Некоторые вещи, которые должны сработать, просто невозможны, вы можете реализовать их в 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>

    Немного текста text2 text3 Немного текста text2 text3 Немного текста text2 text3 Немного текста text2 text3

Все, что я изменил, было:

удален list-style-position добавлен list-style-type: квадрат и цвет фона (чтобы скрыть маркер) Возможно, вам потребуется дополнительная разметка для поддержки альтернативного цвета строки. Это слишком много взломать?

Источник
Другие вопросы по тегам