html - 如何将 css 列垂直对齐到底部？

Question

具有以下代码:http://codepen.io/anon/pen/wCcfA

HTML:

<ul id="menu-main-menu">
  <li><a>Home</a></li>
  <li><a>About</a></li>
  <li><a>Portfolio</a></li>
  <li><a>Blog</a></li>
  <li><a>Contact</a></li>
</ul>

CSS:

#menu-main-menu {
  padding: 0;
  height: 77px;
  -webkit-column-count: 2;
  -webkit-column-gap: 42px;
  border: 1px solid blue;
  width:250px;
}

#menu-main-menu li{
  display: block;
  list-style: none;
  height: 24px;
  border: 1px solid red;
}

如何在“menu-main-menu”的最底部而不是顶部垂直对齐所有“li”元素？

Answer 1

How can I vertically align all the "li" elements at the very bottom of "menu-main-menu" rather than at the top?

我不认为vertical-align可以应用在这里。

但有一种方法应该可行:使用 transform 首先在 Y 轴上翻转整个菜单——然后再次在列表项上将它们“翻转”回可读状态:

#menu-main-menu {
  /* … */
  -webkit-transform:scaleY(-1);
  transform:scaleY(-1);
}

#menu-main-menu li{
  /* … */
  -webkit-transform:scaleY(-1);
  transform:scaleY(-1);
}

http://codepen.io/anon/pen/Abrxl

当然，翻转菜单会改变元素的顺序——要纠正这个问题，它们在 HTML 中的顺序也必须改变:http://codepen.io/anon/pen/yxDsi这是否是您愿意做出的妥协，由您决定。

---

我在这里添加了 -webkit- 前缀版本和无前缀版本，还有列属性的 -moz- 版本，但在 Firefox 中似乎有一些额外的利润或类似的事情正在发生。这似乎来自应用列属性，但似乎不是应用转换的结果。也许您会找到一种解决方案，让您自己看起来更流畅。