html - 同时水平和垂直排列<li>

Question

我的网站有一个类似于 Office 2007-2013 功能区的导航结构，在标记中看起来像这样。

这是每个“选项卡”的内容(每个选项卡都包含在另一个代表每个顶级选项卡及其内容的 <ul> 中。选项卡可见性由 javascript 控制)。

<ul> <!-- this UL represents the tab content -->
    <li> <!-- this LI represents the "button group" -->
         <p>Paragraph</p>
         <ul>
             <li><a href="#"><span>Foo</span></a></li>
             <li><a href="#"><span>Bar</span></a></li>
             <li><a href="#"><span>Baz</span></a></li>
         </ul>
    </li>
    <li> <!-- this LI represents the "button group" -->
         <p>Styles</p>
         <ul>
             <li><a href="#"><span>Foo</span></a></li>
             <li><a href="#"><span>Bar</span></a></li>
             <li><a href="#"><span>Baz</span></a></li>
         </ul>
    </li>
</ul>

<p>在每个按钮组中绝对定位到每个按钮组的底部中心，<ul>有自己定义的高度。

目前所有最里面的<li><a>元素水平排列在一行中(如大块按钮)，或垂直排列最多 3 <li>每个 <ul> 的元素作为小的纯文本按钮。

这是我到目前为止所获得的 jsFiddle，仅显示粗大的按钮:

http://jsfiddle.net/ahG7K/2/

但我想要一个看起来像这样的组合方法:

但我一直在寻找一种无需修改 HTML 即可实现此功能的好方法，并且还避免了绝对定位(因为害怕破坏不同字体大小或其他细节的破坏，而且感觉不纯)。

Answer 1

使用纯 CSS 有两种方法可以解决这个问题。这两种方法都不适用于 IE<10。

第一个非常简单，并且有很好的浏览器支持(尽管 Firefox 缺少对一些相关属性的支持，例如 break-before 和 column-span):

http://cssdeck.com/labs/q7sc2mcc

ul {
  columns: 3;
}

可能需要前缀:http://caniuse.com/#feat=multicolumn

第二种方法需要更多 CSS 才能实现，并且您必须指定高度，但您可以更好地控制结果。支持仅限于支持从 Flexbox 模块包装的浏览器(目前只有 Opera、Chrome 和 IE10 支持)。

http://codepen.io/cimmanon/pen/pldLa

ul {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column wrap;
  -ms-flex-flow: column wrap;
  flex-flow: column wrap;
  height: 10em;
}

li {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

Float 也可以用于此目的，但您必须提前知道宽度。要强制最后一个出现在倒数第二个下方，请使用以下公式:[父级宽度]/[元素数量 - 1]

http://cssdeck.com/labs/aksfizam (对于 4 个元素)

li {
  float: left;
  width: 33%;
}