小编rjt*_*000的帖子

水平对齐多个无序列表(UL)列

我有多个无序列表,具有不同数量的元素和列标题,其中包含不同数量的文本.

我正在使用flexbox水平对齐它们,但我正在努力使列彼此对齐.

当前问题: 期望的结果:

编辑:需要注意的是列标题类是可选的,可以删除,以便该项只是一个普通的列表项.

激活列标题后,我需要列标题以匹配列标题li的高度与最多文本.我让flexbox工作以水平对齐列表,但列没有排列.

这是JsFiddle:(https://jsfiddle.net/xk04m7g1/)

.column-stack {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 30px
}

.column-stack ul {
  -ms-flex: none;
  flex: none;
  width: calc(33.333% - 10px);
}

.column-stack ul .column-header {
  font-size: 12px;
  text-transform: uppercase;
  color: #006a4d;
  font-weight: 500;
  padding-bottom: 5px;
  border-bottom: 1px solid #3a3a3a;
  display: flex;
  align-items: stretch;
  /* Default */
  justify-content: space-between;
}

Run Code Online (Sandbox Code Playgroud)

<div class="column-stack">
  <ul>
    <li class="column-header">Header 1 One Line</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  <ul> …

Run Code Online (Sandbox Code Playgroud)

html css css3 flexbox

rjt*_*000

2019 02-05

0
推荐指数

1
解决办法

303
查看次数