CODEWITHSUNDEEP
htmlcss
gritbranch
gritbranch

Reputation: 199

Right-align elements on multiple rows

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.

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.

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

Please see below.

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

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

Thanks!

Upvotes: 1

Views: 433

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371619

How about a simple 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>

Upvotes: 3

Related Questions