Какой CSS предотвратит перекрытие этих вложенных элементов списка? - PullRequest
Новая
       7

Какой CSS предотвратит перекрытие этих вложенных элементов списка?

3 голосов
/ 06 февраля 2010

Пожалуйста, просмотрите следующий HTML / CSS как веб-страницу . Он отображает контур с границами вокруг различных элементов. Содержащий список преднамеренно позволяет горизонтальную прокрутку в пределах фиксированной ширины. Проблема в том, что когда вы прокручиваете крайний правый контур, вы видите, что границы (все яркие цвета) внутренних элементов перекрывают друг друга. Желаемый эффект заключается в том, что все они находятся на одном уровне (с правой стороны) с вмещающим элементом, так что никакого перекрытия не происходит. Какой самый простой CSS для этого? 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Problem</title>
<style type="text/css">
ul {
    padding: 0 0 0 20px !important;
    margin: 0 !important;
    width: 300px !important;
    border: solid 1px orange;
    height: auto;
    overflow: visible;
}
li, span {
    padding: 0;
    margin: 0;
}
#top {
    border: solid 1px black;
}
#top > li {
    overflow-x: auto;
    overflow-y: hidden;
    border: solid 1px yellow;
    margin-left: -20px;
}
li {
    display: block;
    border: solid 1px red;
}
li, ul, span {
    width: auto;
    white-space: nowrap !important;
}
</style>
</head>
<body>

<ul id='top'>
    <li id='trunk'>
        <span>This is the trunk</span>
        <ul>
            <li><span>This is the first line item</span>
             <ul>
              <li><span>This is the first subitem</span><ul></ul></li>
              <li><span>This is the second subitem</span><ul></ul></li>
              <li><span>This is the third subitem</span><ul></ul></li>
             </ul>
            </li>
            <li><span>This is the second line item</span><ul></ul></li>
            <li><span>This is the third line item</span><ul></ul></li>
        </ul>
    </li>
</ul>

</body>
</html>

РЕДАКТИРОВАТЬ:

На следующем рисунке показан пример схемы. Обратите внимание, что ширина фиксирована, и она может прокручиваться вправо в случае, если пользователь вводит заголовок, который длиннее, чем может отображаться в видимой области. Обратите внимание, что выделенный элемент и его дочерние элементы обернуты в светло-серый цвет. Справа есть несколько оранжевых отметок, используемых для отладки.

http://drop.io/dfhejyj/asset/outline-png

На следующем рисунке показан тот же контур, прокрученный вправо. Прокрутка является преднамеренной и не должна быть устранена. Проблема в том, что при прокрутке вправо заголовки выходят за пределы тега UL, содержащего свет (светло-серый). Точно так же с оранжевыми отметинами. Желаемый эффект заключается в том, что оранжевые отметки и серая область всегда будут всплывающими справа от области выбора (ограниченной полосой прокрутки), и полоса прокрутки всегда будет оставаться (пока любой из заголовков достаточно длинный производить).

http://drop.io/dfhejyj/asset/outline-scrolled-to-right-png

Оценка DigruntedGoat абсолютно верна. Однако мне нужен корректирующий подход. Вероятно, это могло бы легче работать с сломанной блочной моделью, используемой старым браузером IE.

Ответы [ 3 ]

1 голос
/ 06 февраля 2010

Они перекрываются, потому что каждый элемент <ul> имеет ширину 300 пикселей, а также имеет left-padding, который создает «ступенчатый» вид. Таким образом, первый список изменяется от 0 до 300 пикселей по горизонтали, а второй вложенный список - от 20 до 320 пикселей и т. Д.

Я не совсем уверен в эффекте, который вы пытаетесь достичь (может быть, вы могли бы опубликовать макет?), Но, возможно, установка ширины только для самого внешнего <ul> (то есть селектора #top) сделает то, что ты хочешь.

1 голос
/ 06 февраля 2010 
li, span {
    overflow: hidden;
}

демо

Это лучше, хотя: 

#top {
    width: 300px !important;
}
ul {
    padding: 0 0 0 20px !important;
    margin: 0 !important;
    border: solid 1px orange;
    height: auto;
    overflow: visible;
}

демо

0 голосов
/ 06 февраля 2010

Я наконец смог решить эту проблему, добавив дополнительный контейнер:

http://jsbin.com/itevo/2

Спасибо Сэму Х. и DisgruntedGoat, которые нашли время, чтобы предложить некоторые рекомендации. :)

...