对齐两列列表项

Question

我正在开发一个需要两列的菜单。我已经能够完成这个，但是这个菜单的一个要求是，如果每列中的项目数量不均匀，则最后一个应该与右列对齐。

我猜这与这个问题非常相似。我的ul向右浮动，我的li浮动到左侧。将li向右浮动可实现我想要的外观，但正如预期的那样，链接出现故障。

有没有办法可以在没有JS的情况下实现这一目标？

Answer 1

:nth-last-child()和:nth-child()的组合应该可以解决问题。使用下面的代码，您只选择最后一个孩子，如果它是奇数，float是正确的。

＆＃13;

＆＃13;

li { width: 50%; display: inline-block; }
li:nth-last-child(1):nth-child(odd) { float: right; }

＆＃13;

<ul>
  <li>1</li><!--
  --><li>2</li><!--
  --><li>3</li><!--
  --><li>4</li><!--
  --><li>5</li><!--
  --><li>6</li><!--
  --><li>7</li><!--
  --><li>8</li><!--
  --><li>9</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我会做以下操作，以避免使用浮点数：

li { width: 50%; display: inline-block; text-align: left; }
ul { text-align: right; }

<ul>
  <li>1</li><!--
  --><li>2</li><!--
  --><li>3</li><!--
  --><li>4</li><!--
  --><li>5</li><!--
  --><li>6</li><!--
  --><li>7</li><!--
  --><li>8</li><!--
  --><li>9</li>
</ul>