Html 水平列表中的垂直列表_Html_Css

Html 水平列表中的垂直列表

html css

Html 水平列表中的垂直列表,html,css,Html,Css,我正在尝试创建一个基本导航，我希望有一个水平列表和一个垂直项目列表： 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&

我正在尝试创建一个基本导航，我希望有一个水平列表和一个垂直项目列表：

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>


标题1






标题2






标题3

我试图避免每个标题部分都使用浮动div

我一直在尝试为uls使用两个css类，外部设置为

display:inline

，内部设置为

display:block

，但我无法让它工作

如何执行此操作，还是必须浮动div？

您可以浮动第一级

li

s（以避免“浮动divs”），或者对第一级

li

s使用

display:inline block

。请记住，浮动将适用于IE6+，而

内联块

仅限于通常显示

内联

的元素

第一个（浮动第一级

li

s）建议的基本演示：

ul{
宽度：90%；
保证金：0自动；
}
ul>li{
浮动：左；
宽度：32%；
}
ul>li>ul{
显示：块；
宽度：100%；
}
ul>li>ul>li{
显示：块；
浮动：无；
}


标题1









标题2









标题3

试试下面的代码我花了一点时间来满足任何需要这个的人

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


李先生{
浮动：左；
宽度：30%；
}
.ul>li ul{
显示：块；
左边距：-30px；
}
.ul>li ul>li{
显示：块；
浮动：无；
}
.ul>李a{
颜色：白色；
}
页脚{
填充：20px；
填充底部：100px；
背景：#333；
颜色：白色；
}


纳伯







多斯塔姆

比尔
iki
加州大学



纳什

比尔
iki
加州大学

+1是的，我会这么说的。尽管如此，我认为如果您将相关CSS作为您答案的一部分，这将是有帮助的。如果JSBin被折叠了怎么办？@Josh，基本上，我是发帖然后离开的；出于某种原因，我认为我已经包含了css。啊，我中年的衰老…=）谢谢我以为我在6小时前写了一篇评论，但显然不是。这很有效。我没有正确使用>选择器。不知道我在想什么。再次感谢。