CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
Lara
Lara

Reputation: 3021

Not able to float ListItem right in List

I have an array containing object which needs to be displayed in ListItem of List. Now i want to display these ListItems from array Objects in 'left' - 'right'. Odd number needs to go in left and Even in right but float:right is not working. Here is my CodeSandBox link.

list: {
marginTop: "8%",
float: "right",
marginBottom: theme.spacing(2)
}

What's wrong in my code?

Upvotes: 0

Views: 57

Answers (1)

hasankzl
hasankzl

Reputation: 1019

you can use this css code for reverse your div. If the div displaying as a flex

flex-direction: row-reverse

if not displaying as a flex

display:flex
flex-direction: row-reverse

check the example below

.block {
  padding: 10px;
  margin: 10px;
  background: red;
}

.without-reverse {
  display: flex;
}

.with-reverse {
  display: flex;
  flex-direction: row-reverse;
}
<div class="without-reverse">
  <div class="block">A</div>
  <div class="block">B</div>
  <div class="block">C</div>
</div>
<div class="with-reverse">
  <div class="block">A</div>
  <div class="block">B</div>
  <div class="block">C</div>
</div>

Upvotes: 1

Related Questions