无法将ListItem浮动在List中

问题描述

我有一个包含对象的数组，该对象需要在List的ListItem中显示。现在，我想从“左”-“右”中的数组对象中显示这些ListItems。奇数需要在左边和偶数右边输入，但是float:right不起作用。这是我的CodeSandBox链接。

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

我的代码有什么问题？

解决方法

您可以使用此CSS代码反转div。如果div显示为flex

flex-direction: row-reverse

如果不显示为flex

display:flex
flex-direction: row-reverse

检查下面的示例

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