水平和垂直排列<li>同时</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>元素都水平排列在一行（如粗大的按钮），或垂直排列，每<li>个元素最多3 <ul>个元素小文本按钮。

这是我到目前为止所获得的jsFiddle，只显示了粗略的按钮：

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

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

但我坚持一个很好的方法来实现这一点而不需要修改HTML，同时也避免绝对定位（因为担心破坏不同字体大小或其他细节，加上它只是感觉不纯）。 / p>

Answer 1

使用纯CSS有两种方法可以解决这个问题。这两种方法都不适用于IE＆lt; 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 也可以用于此目的，但您必须事先知道宽度。要强制最后一个显示在倒数第二个下方，请使用以下公式：[width of parent] / [num of elements - 1]

http://cssdeck.com/labs/aksfizam（4个元素）

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