2011-04-12 34 views
5

我有一個包含多個部分的列表。我試圖讓它看起來像一棵樹。它開始相當好,但我無法修復最後一點。CSS - 列表樹背景問題

的代碼,可以發現:

http://jsfiddle.net/Kwfpm/

下面是它如何工作

  • 第一 「Datorer」, 「Mjukvara」 和 「微軟」應該連接到 與水平線的樹。
  • 左下角的「Mjukvara」應該連接到「Kategorier」,並將其連接到 。

有一些重複的問題,但如果上述兩個問題解決了這些問題應該解決。

這裏是一個鏈接,它應該是什麼樣子(沒有崩潰的東西):

打開和關閉,看樹: http://jquery.bassistance.de/treeview/demo/prerendered.html

信息

  • 我不知道有多少層次。
  • HTML無法更改,因爲它是由Wordpress生成的
  • 使用背景或邊框來顯示您所得到的。

如果的jsfiddle不工作,你可以使用這個:

CSS

* { 
    margin: 0; 
    padding: 0; 
} 
.sidebar > ul > li { 
    background: none; 
} 
li { 
    padding-left: 20px; 
    list-style: none; 
    background: url('http://www.jenst.se/images/normal.png') repeat-y 10px 0; 
    color: #333; 
    font-family: Arial; 
    font-size: 13px; 
    line-height: 22px; 
} 
li a { 
    color: #555; 
} 
li:last-child { 
    background: url('http://www.jenst.se/images/lastchild.png') no-repeat 10px 0px; 
} 

HTML

<div class="sidebar default"> 
<ul> 
    <li id="categories-10" class="widget widget_categories"> 
     <h4 class="title">Kategorier</h4> 
     <ul> 
      <li class="cat-item cat-item-7"><a href="http://localhost/concepts/addmod/category/sjukt-lang-kategori-som-tar-for-mycket-plats/" title="Se alla inlägg sparade under Datorer">Datorer</a> 
      </li> 
      <li class="cat-item cat-item-3"><a href="http://localhost/concepts/addmod/category/testkategori/" title="Se alla inlägg sparade under Mjukvara">Mjukvara</a> 
       <ul class='children'> 
        <li class="cat-item cat-item-4"><a href="http://localhost/concepts/addmod/category/testkategori/underkategori/" title="Se alla inlägg sparade under Hårdvara">Hårdvara</a> 
         <ul class='children'> 
          <li class="cat-item cat-item-6"><a href="http://localhost/concepts/addmod/category/testkategori/underkategori/underkategori-2/" title="Se alla inlägg sparade under Microsoft">Microsoft</a> 
          </li> 
          <li class="cat-item cat-item-9"><a href="http://localhost/concepts/addmod/category/testkategori/underkategori/bla/" title="Se alla inlägg sparade under Office-paket">Office-paket</a> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
      <li class="cat-item cat-item-3"><a href="http://localhost/concepts/addmod/category/testkategori/" title="Se alla inlägg sparade under Mjukvara">Mjukvara</a> 
       <ul class='children'> 
        <li class="cat-item cat-item-4"><a href="http://localhost/concepts/addmod/category/testkategori/underkategori/" title="Se alla inlägg sparade under Hårdvara">Hårdvara</a> 
         <ul class='children'> 
          <li class="cat-item cat-item-6"><a href="http://localhost/concepts/addmod/category/testkategori/underkategori/underkategori-2/" title="Se alla inlägg sparade under Microsoft">Microsoft</a> 
          </li> 
          <li class="cat-item cat-item-9"><a href="http://localhost/concepts/addmod/category/testkategori/underkategori/bla/" title="Se alla inlägg sparade under Office-paket">Office-paket</a> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li id="categories-10" class="widget widget_categories"> 
     <ul> 
      <li class="cat-item cat-item-7"><a href="http://localhost/concepts/addmod/category/sjukt-lang-kategori-som-tar-for-mycket-plats/" title="Se alla inlägg sparade under Datorer">Datorer</a> 
      </li> 
      <li class="cat-item cat-item-3"><a href="http://localhost/concepts/addmod/category/testkategori/" title="Se alla inlägg sparade under Mjukvara">Mjukvara</a> 
       <ul class='children'> 
        <li class="cat-item cat-item-4"><a href="http://localhost/concepts/addmod/category/testkategori/underkategori/" title="Se alla inlägg sparade under Hårdvara">Hårdvara</a> 
         <ul class='children'> 
          <li class="cat-item cat-item-6"><a href="http://localhost/concepts/addmod/category/testkategori/underkategori/underkategori-2/" title="Se alla inlägg sparade under Microsoft">Microsoft</a> 
          </li> 
          <li class="cat-item cat-item-9"><a href="http://localhost/concepts/addmod/category/testkategori/underkategori/bla/" title="Se alla inlägg sparade under Office-paket">Office-paket</a> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 
</div> 
+0

是JavaScript的任何選項,或者這也是禁止的? – Marnix 2011-04-12 16:53:59

+0

@Marnix CSS是首選,但我會接受一個工作的Javascript的答案。 – 2011-04-12 17:01:35

+0

你想自己寫嗎?因爲我實際上爲javascript找到了很多很棒的treeview工具。 – Marnix 2011-04-12 17:02:46

回答