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