如何对齐HTML / Javascript列表最左侧的项目和最右侧的项目？

Question

我很难能够像我喜欢的那样格式化项目列表。

我喜欢放在最左边的物品和放在最右边的物品。

这是一个说明我的意思的链接。

list arrangement

我将如何做到这一点？我听说桌子可能是最简单的，但我也被告知试图远离桌子。

Answer 1

我建议创建两个<div>，一个用于您想要的数据，另一个用于右侧的数据。然后分别使用text-align:left和text-align:right作为CSS规则。

Answer 2

我实际上会推荐表格，这看起来像是表格数据..表格上的单词表格，如表格中的表格用于表格数据。 如果你仍然想使用列表，我建议做2个列表并让tableA float：left，并让tableB float：right;

检查这个小提琴：

https://jsfiddle.net/selda_uxunicorn/assektkm/

CSS：

ul {
  list-style: none;
  padding: 0px;
}

.tableA {
  float: left;
}

.tableB{
  float: right;
  text-align: right;
}

HTML：

<ul class="tableA">
<li>this item</li>
<li>this other item</li>
</ul>

<ul class="tableB">
<li>item</li>
<li>another item</li>
</ul>