水平列表中的垂直列表 [英] Vertical List Within a Horizontal List

问题描述

我正在尝试创建一个基本导航，我想要一个横向列表，其中包含垂直项列表：

I'm trying to create a basic navigation and I'd like to have a horizontal list with a vertical items list:

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

我为这个标记拍摄，或类似的：

I'm shooting for this markup, or something similar:

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

I'm trying to avoid floating divs for each header section.

我一直试图使用两个css类为uls，外部设置为 display：inline 和内部 display：block ，但我无法让它工作。

I've been trying to use two css classes for the uls, with the outer set to display:inline and the inner to display:block, but I can't get it to work.

如何做到这一点， div

How do I do this, or do I have to float divs?

推荐答案

您可以浮动第一层 li 避免浮动divs），或对于第一级 li 使用 display：inline-block 牢记浮动将适用于IE6 +，而 inline-block 仅限于通常显示 inline

You can float the first-level lis (to avoid 'floating divs'), or use display: inline-block for the first-level lis. Bearing in mind that floating will work for IE6+, whereas inline-block is restricted to only those elements that would normally display inline.

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

Basic demo for the first (float the first-level lis) suggestion:

 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 for the first-level li s）建议：

Basic demo for the second (display: inline-block for the first-level lis) suggestion:

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>

这篇关于水平列表中的垂直列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！