Question

我正在尝试创建基本导航，我想要一个包含垂直项目列表的水平列表：

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？

Answer 1

您可以浮动第一级li（以避免“浮动div”），或使用display: inline-block作为第一级li。请记住，浮动适用于IE6 +，而inline-block仅限于那些通常显示inline的元素。

第一个基本演示（浮动第一级li）建议：

 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的{{1}}）建议：

li

ul {
  width: 90%;
  margin: 0 auto;
}
ul li {
  display: inline-block;
  width: 32%;
}
ul li ul {
  width: 100%;
}
ul li ul li {
  display: block;
}

Answer 2

尝试下面的代码，我花了一个小时间，任何人都需要这个

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

水平列表中的垂直列表

2 个答案: