在多行上右对齐元素

问题描述

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

I want to align the li elements to the right side of the div. I am able to do this by floating the ul to the right.

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

However, I have a lot li elements so depending on the width of the div, some of these move to the next row. The problem is that the li elements are being aligned to the left.

在<$ c处放置浮动$ c> li 可以解决此问题，但会颠倒菜单项的顺序。

Placing float right to the li would solve this issue, but it would reverse the order of the menu items.

请参见下文。

.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位于右侧）。

Any idea on how to align the menu to the right without having to reverse the order of the menu? (ie menu 08 on the next row sits to 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>

这篇关于在多行上右对齐元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！