Плавающие секции элементов LI внутри UL с CSS - PullRequest
Новая
       13

Плавающие секции элементов LI внутри UL с CSS

2 голосов
/ 12 февраля 2012

У меня есть серия LI внутри UL, например: 

<ul>
    <li class="section left"></li>
    <li>I want to float this on the left</li>
    <li>I want to float this on the left</li>
    <li>I want to float this on the left</li>
    <li class="section right"></li>
    <li>I want to float this on the right</li>
    <li>I want to float this on the right</li>
    <li>I want to float this on the right</li>
</ul>

Этот HTML генерируется php, и я не могу изменить HTML, с другой стороны, у меня есть возможность назначать классы отдельнымЭлементы LI.UL и LI будут содержать элементы формы, которые я хочу распределить в двух разделах, с плавающим некоторым содержимым (некоторые LI) слева и некоторым содержимым (другие LI) справа.

Если бы я мог вкладывать ULв основном UL это было бы намного проще, рассматривая внутренние UL как блоки, но я не могу сделать это здесь.

Как добиться того же результата с CSS, учитывая ограничения HTML, упомянутые выше?Я имею в виду, что да, я мог бы назначить плавающие классы индивидуально для каждого LI, но я надеялся найти более элегантное решение здесь.

спасибо

Ответы [ 4 ]

2 голосов
/ 13 февраля 2012

Добавьте следующий код CSS3: 

ul{width:100%;list-style:none;}
/* the '~'  (general sibling combinator)
 * selector will select all following siblings in the document tree.
 * This selector is part of the CSS3 selector recommendation,
 * see also http://www.w3.org/TR/selectors/#general-sibling-combinators
 *
*/
li.section.left, li.section.left ~ li{
    background-color:#faa;
    float:left;
    margin-right:1em;
}
li.secton.right , li.section.right ~ li{
    background-color:#afa;
    float:right ;
    margin-left:1em;
    margin-right:0;
}

Используйте это с предложенным кодом, и вы получите то, что вам нужно (по крайней мере, в приличных браузерах). JSFiddle Demo / Демо с небольшим размером шрифта (чтобы увидеть эффект)

Обновление: IE7 + совместимая версия (простобез :not)

2 голосов
/ 13 февраля 2012

Не уверен, как именно вы хотите, чтобы список выглядел ... Но, , если вы можете назначить правильный класс для элементов списка , вы можете установить CSS вдоль линийпоказано ниже, чтобы расположить их: 

<html>
<head>
    <style>
        li {width:300px; list-style-position:inside;}
        li.right {background:pink; text-align:right; direction:rtl;}
    </style>
</head>
<body>

    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li class="right">Item 3 -- right</li>
        <li>Item 4</li>
        <li class="right">Item 5 -- right</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
    </ul>

</body>
</html>
1 голос
/ 12 февраля 2012

Хм, немного сложно.Является ли количество элементов фиксированным?

Если это так, первое, что приходит на ум, - это использование соседнего селектора (+).

li.section.left,
li.section.left + li,
li.section.left + li + li,
li.section.left + li + li + li {
    float: left
}

То же самое для элементов типа float-right ... В противном случае я попытался бы использовать jquery для доступа к элементам и присвоения им классов.

0 голосов
/ 12 февраля 2012

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

<div>
    <ul>
        <li>I want to float this on the left</li>
        <li>I want to float this on the right</li>
        <li>I want to float this on the left</li>
        <li>I want to float this on the right</li>
        <li>I want to float this on the left</li>
        <li>I want to float this on the right</li>
    </ul>
</div>

Затем в CSS вы оставляете все LI плавающими и стилизуете их (я имею в виду ширину, высоту и т. Д.) После этого создайте вокруг него небольшой div и дайте ему максимум, какой вы хотите, чтобы вы были в форме (убедитесь, что LI помещается в него в строках по 2).

Это может быть решением, но я не знаю, какую часть HTML вы можете изменить.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...