Каков наилучший способ визуально переместить элементы списка? - PullRequest
0 голосов
/ 23 ноября 2011

У меня есть <ul> с кучей <li> с.

Некоторые из <li> должны иметь определенное форматирование, например

a
b
    c
    d
e

У меня не может быть <li>, содержащего <ul>, поэтому сейчас я оборачиваю c и d в <div> с установленным левым полем. Это безопасно сделать, есть ли лучший способ сделать это?

Ответы [ 3 ]

3 голосов
/ 23 ноября 2011

Напишите так:

CSS:

ul{
     list-tyle:none;
}
li{
    margin:5px 0;
}
.shift{
    margin-left:20px;
}

HTML:

<ul>
    <li>a</li>
    <li>b</li>
    <li class="shift">c</li>
    <li class="shift">d</li>
    <li>e</li>
</ul>

Проверить это в прямом эфире http://jsfiddle.net/KuNWf/

0 голосов
/ 23 ноября 2011

Это будет работать.

Другой вариант может использовать CSS для обработки следующим образом:

        .myUl{
            margin:0px;
            list-style-type: none;
        }
        .myUl .marginless {
            margin: 0px;
        }
        .myUl .margin {
            margin: 0px;
            margin-left: 20px;
        }


    <ul class="myUl">
        <li class="marginless">a</li>
        <li class="marginless">b</li>
        <li class="margin">c</li>
        <li class="margin">d</li>
        <li class="marginless">e</li>
    </ul>
0 голосов
/ 23 ноября 2011

Нет, это не очень хорошая идея.

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

Стандарт определен здесь .

Есть ли причина, по которой вы не можете вкладывать ul теги?

...