CODEWITHSUNDEEP
csshtmlcss-floathtml-lists
António Mendes
António Mendes

Reputation: 31

moving/floating 2 lists out of 3 to the right but keep the markup order

i have three lists that are inline-block. the last two i want to move them to the right of the screen but keep their markup order i float them with and without clearfix

problem is that i can't keep their markup order, as the third list appears before the second.

what am i doing wrong? :/

ul {
  display: inline-block; 
}

ul:nth-child(2),
ul:nth-child(3) {
  color: red;
  float: right
}
<ul>
  <li>1</li>
   <li>2</li>
</ul>

<ul>
  <li>3</li>
    <li>4</li>
</ul>

<ul>
  <li>5</li>
  <li>6</li>
</ul>

Upvotes: 3

Views: 25

Answers (1)

Temani Afif
Temani Afif

Reputation: 272937

Using float:right will change the flow to start from the right so the result you got is logical (the first element in the DOM will be the first one on the right).

Instead of this you can use left floating with the first one and adjust text-align to move the other ones:

body {
  text-align:right;
}

ul {
  display: inline-block; 
}

ul:nth-child(2),
ul:nth-child(3) {
  color: red;
}
ul:nth-child(1) {
  float:left;
}
<ul>
  <li>1</li>
   <li>2</li>
</ul>

<ul>
  <li>3</li>
    <li>4</li>
</ul>

<ul>
  <li>5</li>
  <li>6</li>
</ul>

And for a more cleaner and modern way you can use flexbox:

body {
  display:flex;
}

ul:nth-child(2),
ul:nth-child(3) {
  color: red;
}
ul:nth-child(1) {
  margin-right:auto;
}
<ul>
  <li>1</li>
   <li>2</li>
</ul>

<ul>
  <li>3</li>
    <li>4</li>
</ul>

<ul>
  <li>5</li>
  <li>6</li>
</ul>

Upvotes: 2

Related Questions