多行右对齐元素答案

【问题标题】：Right-align elements on multiple rows多行右对齐元素
【发布时间】：2018-04-05 23:49:53
【问题描述】：

我想将li 元素对齐到 div 的右侧。我可以通过将ul 向右浮动来做到这一点。

但是，我有很多 li 元素，因此根据 div 的宽度，其中一些会移动到下一行。问题是li 元素左对齐。

将浮动放在li 的右侧可以解决此问题，但会颠倒菜单项的顺序。

请看下文。

.row {
  display: flex;
}

.col-1 {
  flex: 1;
  border: 1px solid red;
}

.col-2 {
  flex: 1;
  border: 1px solid blue;
}

ul#menu {
  margin: 0;
  padding: 0;
  float: right;
}

ul#menu li {
  display: inline;
  /*This would right align the menu but would reverse the order*/
  /* float: right; */
}

<div class="row">
  <div class="col-1">Lorem ipsum dolor sit amet</div>
  <div class="col-2">
    <ul id="menu">
      <li>menu 01</li>
      <li>menu 02</li>
      <li>menu 03</li>
      <li>menu 04</li>
      <li>menu 05</li>
      <li>menu 06</li>
      <li>menu 07</li>
      <li>menu 08</li>
    </ul>
  </div>
</div>

知道如何在不颠倒菜单顺序的情况下将菜单向右对齐吗？（即下一行的菜单 08 位于右侧）。

谢谢！

【问题讨论】：

标签： html css

【解决方案1】：

简单的text-align: right怎么样？

.row {
  display: flex;
}

.col-1 {
  flex: 1;
  border: 1px solid red;
}

.col-2 {
  flex: 1;
  border: 1px solid blue;
}

ul#menu {
  text-align: right;
  margin: 0;
  padding: 0;  
}

ul#menu li {
  display: inline;
}

<div class="row">
  <div class="col-1">Lorem ipsum dolor sit amet</div>
  <div class="col-2">
    <ul id="menu">
      <li>menu 01</li>
      <li>menu 02</li>
      <li>menu 03</li>
      <li>menu 04</li>
      <li>menu 05</li>
      <li>menu 06</li>
      <li>menu 07</li>
      <li>menu 08</li>
    </ul>
  </div>
</div>

【讨论】：