Горизонтальный вложенный список с использованием CSS - PullRequest
Новая
       24

Горизонтальный вложенный список с использованием CSS

3 голосов
/ 04 декабря 2010

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

<ul>
<li class="alone">List Item 1</li>
<li class="alone">List Item 2</li>
<li class="alone">List Item 3</li>
<li class="group">List Item 4
  <ul>
    <li class="not_alone">List Item 4a</li>
    <li class="not_alone">List Item 4b</li>
    <li class="not_alone">List Item 4c</li>
    <li class="not_alone">List Item 4d</li>
  </ul>
</li>
<li class="alone">List Item 5</li>
</ul>

Я бы хотел добиться чего-то похожего на это: 

<style>
div { display: inline-block; }
.alone { background: #E5ECF9; border: 1px solid #336699; color: #336699;  }
.group { background: #FBE3E4; border: 1px solid #CC0000; color: #CC0000; }
.group .not_alone { background: #FBE3E4; border: 1px solid #CC0000; color: #CC0000; }
.item { padding: 2px; margin: 0 2px; }
</style>
<div class="wrapper">
  <div class="alone item">List Item 1</div>
  <div class="alone item">List Item 2</div>
  <div class="alone item">List Item 3</div>
  <div class="group item">
    List Item 4
    <div class="group item">List Item 4a</div>
    <div class="group item">List Item 4b</div>
    <div class="group item">List Item 4c</div>
    <div class="group item">List Item 4d</div>
  </div>
  </div>
  <div class="alone item">List Item 5</div>
</div>

Вы можете увидеть демо здесь http://jsbin.com/exivi5.

Возможно ли это с использованием существующей разметки вложенного списка? Кроме того, могу ли я сохранить ширину родительского списка ul равной 100%, чтобы она вписывалась во весь видовой экран?

Это должно быть совместимо с FF, Webkit и IE7 +, но соглашается на поддержку IE8 +.

Заранее спасибо!

Ответы [ 3 ]

2 голосов
/ 04 декабря 2010

попробуйте добавить эти правила CSS: 

ul {list-style: none; margin: 0; padding: 0; float:left; display: inline;}
ul li {float:left; display: inline; margin: 0 5px; padding: 3px 2px;}
ul li ul {float:right;}
h2 {clear: left;}

с легким перебиранием полей и отступов, он должен выглядеть так же, как ваш

1 голос
/ 04 декабря 2010

Если вы добавите стиль 

display:block;

Ли будут отображаться как элементы уровня блока, и тогда вы сможете их стилизовать так же, как в примере на основе Div.Возможно, вам придется сместить их влево, чтобы они были рядом друг с другом, точно так же, как на странице примера.(или используйте inline-block вместо block возможно)

Попробуйте это (я не проверял это, поскольку я на своем маленьком ноутбуке - это основано на памяти / догадках) 

<style>
    #horizontallist li { display: block; float:left; }
    .alone { background: #E5ECF9; border: 1px solid #336699; color: #336699;  }
    .group { background: #FBE3E4; border: 1px solid #CC0000; color: #CC0000; }
    .group .not_alone { background: #FBE3E4; border: 1px solid #CC0000; color: #CC0000; }
    .item { padding: 2px; margin: 0 2px; }
</style>

<ul id="horizontallist">
    <li class="alone item">List Item 1</li>
    <li class="alone item">List Item 2</li>
    <li class="alone item">List Item 3</li>
    <li class="group item">List Item 4
      <ul>
        <li class="group item">List Item 4a</li>
        <li class="group item">List Item 4b</li>
        <li class="group item">List Item 4c</li>
        <li class="group item">List Item 4d</li>
      </ul>
    </li>
    <li class="alone">List Item 5</li>
</ul>
0 голосов
/ 04 декабря 2010

Попробуйте это (требуется jQuery): 

var wrapper = $("body").append("<div id='wrapper'></div>").find("#wrapper");

var lis = $("ul > li");

lis.each(function() {
    var li = $(this);
    if (li.hasClass("alone")) wrapper.append("<div class = 'alone item' >" + li.text() + " </div>");
    else if (li.hasClass("group")) {
        var html = "<div class='group item'>";
        li.find("li").each(function() {
            html += "<div class = 'group item' >" + $(this).text() + " </div>";
        });
        html += "</div>";
        wrapper.append(html);
    }
});

Демо: http://fiddle.jshell.net/EJZMS/show/light/

Код: http://fiddle.jshell.net/EJZMS/

Мой код не является рекурсивным: если у вас есть более одного уровня вложенности, вам нужно будет изменить его самостоятельно.

...