垂直列表中的水平列表

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

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？

來源

2010-09-22 Mark

您可以浮動第一級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>

來源

2010-09-22 21:42:16

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

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

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

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

<!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>

來源

2016-01-21 07:44:45 dewelloper

垂直列表中的水平列表

回答

相關問題