垂直列表中的水平列表

我试图创建一个基本的导航和我想有一个水平列表有垂直项目列表：垂直列表中的水平列表

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

垂直列表中的水平列表

回答

相关问题