Question

我想将li元素与div的右侧对齐。我可以通过将ul浮动到右边来完成此操作。

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

将浮动权放置到li会解决此问题，但它会颠倒菜单项的顺序。

请参阅下文。

＆＃13;

.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; */
}

＆＃13;

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

＆＃13;

如何在不必颠倒菜单顺序的情况下将菜单对齐到右边？（即下一行的菜单08从右到右）。

谢谢！

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

右对齐多行上的元素

1 个答案: