2010-09-22 104 views
4

我試圖創建一個基本的導航和我想有一個水平列表有垂直項目列表:垂直列表中的水平列表

Header 1  Header 2  Header 3 
-Sub 1  -Sub 1  -Sub 1 
-Sub 2  -Sub 2  -Sub 2 
-Sub 3  -Sub 3  -Sub 3 

我拍攝的這個標記,或類似的東西:

<ul> 
    <li><strong>Header 1</strong> 
    <ul> 
     <li><a href="#" title="1">Abcdefghi</a></li> 
     <li><a href="#" title="2">Jklmnopqr</a></li> 
     <li><a href="#" title="3">stuvwzyz</a></li> 
    </ul> 
    </li> 
    <li><strong>Header 2</strong> 
    <ul> 
     <li><a href="#" title="1">Abcdefghi</a></li> 
     <li><a href="#" title="2">Jklmnopqr</a></li> 
     <li><a href="#" title="3">stuvwzyz</a></li> 
    </ul> 
    </li> 
    <li><strong>Header 3</strong> 
    <ul> 
     <li><a href="#" title="1">Abcdefghi</a></li> 
     <li><a href="#" title="2">Jklmnopqr</a></li> 
     <li><a href="#" title="3">stuvwzyz</a></li> 
    </ul> 
    </li> 

</ul> 

我試圖避免每個標題部分的浮動div。

我一直在嘗試爲uls使用兩個css類,外部設置爲display:inline,內部設置爲display:block,但我無法使其工作。

我該怎麼做,還是必須浮動div?

回答

7

您可以浮動第一級li(以避免'浮動div'),或使用display: inline-block作爲第一級li s。請記住,浮動將適用於IE6 +,而inline-block僅限於那些通常會顯示inline的元素。

用於第一基本演示(浮在第一級li S)建議:

ul { 
 
    width: 90%; 
 
    margin: 0 auto; 
 
} 
 
ul > li { 
 
    float: left; 
 
    width: 32%; 
 
} 
 
ul > li > ul { 
 
    display: block; 
 
    width: 100%; 
 
} 
 
ul > li > ul > li { 
 
    display: block; 
 
    float: none; 
 
}
<ul> 
 
    <li><strong>Header 1</strong> 
 
    <ul> 
 
     <li><a href="#" title="1">Abcdefghi</a> 
 
     </li> 
 
     <li><a href="#" title="2">Jklmnopqr</a> 
 
     </li> 
 
     <li><a href="#" title="3">stuvwzyz</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li><strong>Header 2</strong> 
 
    <ul> 
 
     <li><a href="#" title="1">Abcdefghi</a> 
 
     </li> 
 
     <li><a href="#" title="2">Jklmnopqr</a> 
 
     </li> 
 
     <li><a href="#" title="3">stuvwzyz</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li><strong>Header 3</strong> 
 
    <ul> 
 
     <li><a href="#" title="1">Abcdefghi</a> 
 
     </li> 
 
     <li><a href="#" title="2">Jklmnopqr</a> 
 
     </li> 
 
     <li><a href="#" title="3">stuvwzyz</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 

 
</ul>

用於第二(display: inline-block用於第一級li S)建議基本演示:

ul { 
 
    width: 90%; 
 
    margin: 0 auto; 
 
} 
 
ul li { 
 
    display: inline-block; 
 
    width: 32%; 
 
} 
 
ul li ul { 
 
    width: 100%; 
 
} 
 
ul li ul li { 
 
    display: block; 
 
}
<ul> 
 
    <li><strong>Header 1</strong> 
 
    <ul> 
 
     <li><a href="#" title="1">Abcdefghi</a> 
 
     </li> 
 
     <li><a href="#" title="2">Jklmnopqr</a> 
 
     </li> 
 
     <li><a href="#" title="3">stuvwzyz</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li><strong>Header 2</strong> 
 
    <ul> 
 
     <li><a href="#" title="1">Abcdefghi</a> 
 
     </li> 
 
     <li><a href="#" title="2">Jklmnopqr</a> 
 
     </li> 
 
     <li><a href="#" title="3">stuvwzyz</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li><strong>Header 3</strong> 
 
    <ul> 
 
     <li><a href="#" title="1">Abcdefghi</a> 
 
     </li> 
 
     <li><a href="#" title="2">Jklmnopqr</a> 
 
     </li> 
 
     <li><a href="#" title="3">stuvwzyz</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 

 
</ul>

+0

+1沒錯,這就是我說的話。儘管如此,如果您將相關的CSS作爲您的答案的一部分,我認爲這會有所幫助。如果JSBin摺疊怎麼辦? – 2010-09-22 21:47:36

+0

@Josh,我基本上貼了並且徘徊;出於某種原因,我認爲我已*包含了CSS。啊,我中年的衰老...... =) – 2010-09-22 21:52:41

+0

謝謝。我以爲我在6小時前寫了評論,但顯然不是。這工作完美。我沒有正確使用>選擇器。不知道我在想什麼。再次感謝。 – Mark 2010-09-23 07:18:43

0

試試下面的代碼,我花了痘痘的時候有人需要這個

<!DOCTYPE html> 
<html> 
<body> 

<style> 
    .ul li { 
    float: left; 
    width:30%; 
} 

.ul>li ul{ 
    display:block; 
    margin-left:-30px; 
} 

.ul>li ul>li{ 
    display:block; 
    float:none; 
} 
.ul>li a{ 
    color:white; 
} 

footer { 
    padding: 20px; 
    padding-bottom: 100px; 
    background: #333; 
    color:white; 
} 

</style> 

<footer> 
<div> 
<ul class="ul"> 
    <li> 
     naber 

     <ul> 
      <li><a href="#">link bir</a></li> 
      <li><a href="#">link bir</a></li> 
      <li><a href="#">link bir</a></li> 
     </ul> 

    </li> 
    <li> 
     dostum 

     <ul> 
      <li>birrr</li> 
      <li>iki</li> 
      <li>uc</li> 
     </ul> 

    </li> 
    <li> 
     nasılsın 

     <ul> 
      <li>bir</li> 
      <li>iki</li> 
      <li>uc</li> 
     </ul> 

    </li> 
</ul> 
</div> 

</footer> 

</body> 
</html>