Having difficulty aligning ListItem to the right within a List

Question

Having difficulty aligning ListItem to the right within a List

I am working with an array that contains objects which I need to display in ListItems of a List. My goal is to show these ListItems from the array Objects in a layout where odd numbers are on the left and even numbers are on the right. However, I am facing an issue as float:right is not functioning as expected. You can view my code in this CodeSandBox link.

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

I'm trying to figure out what's wrong in my code. Can you help me identify the issue?

javascript css reactjs material-ui

Answer 1

Answer №1

Here is a CSS code snippet that you can use to reverse the order of items within a div. If the div is displayed as a flex container:

flex-direction: row-reverse

If the div is not being displayed as a flex container, you can use the following code:

display:flex
flex-direction: row-reverse

Feel free to refer to the example below for a visual representation:

.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"gt;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>

Answer 2

Here is a CSS code snippet that you can use to reverse the order of items within a div. If the div is displayed as a flex container:

flex-direction: row-reverse

If the div is not being displayed as a flex container, you can use the following code:

display:flex
flex-direction: row-reverse

Feel free to refer to the example below for a visual representation:

.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"gt;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>

Having difficulty aligning ListItem to the right within a List

Answer №1

Similar questions

Angular's use of ES6 generator functions allows for easier management of

Tips for effectively utilizing the drag and drop feature with the Table Component in Ant Design

How to make HTTPS requests in React without SSL verification

Showing JSON information on a web browser

Retrieve the weekday dates for a specific year, month, and relative week number using Javascript or Typescript

Struggling to retrieve data from AJAX POST request [Revised Post]

Transforming screen recording video chunks from blob into multipart for transmission via Api as a multipart

code, scripting - modal pop-up

Increase the jQuery Array

"Dealing with an unspecified number of fields in an ExtJS data model

"The Material UI date picker is encountering an issue with the error prop, which is being evaluated

Next.js 14: Error encountered: invariant alerting that the application's router should be mounted for my React 18 web project

Unable to properly execute object calls with promises

JavaScript query-string encoding

Eliminate repeated elements within a JSON dataset to create a consolidated array

The G/L account specified in the SAP B1 Service Layer is invalid and cannot be used

Storing Images in MongoDB with the MEAN Stack: A Guide using Node.js, Express.js, and Angular 6

Aligning the icon within the div and adding a gap between each div

The issue at hand is that Redux Persist state fails to persist data fetched from an API using

Bootstrap Modal closing problem