Question

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;
}

如何垂直对齐所有＆＃34; li＆＃34; ＆＃34; menu-main-menu＆＃34;底部的元素;而不是在顶部？

Answer 1

一种解决方案是每隔4n margin-top元素使用li，如：

＆＃13;

#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;
  position: relative;
}
#menu-main-menu li:nth-child(4n) {
  margin-top: 24px; /*add margin top*/
}

＆＃13;

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

＆＃13;

Answer 2

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

我认为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中似乎有一些额外的边距或类似的情况。这似乎来自应用列属性，但似乎不是应用转换的结果。也许你会找到一个让自己看起来更顺畅的解决方案。

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

2 个答案: