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

【问题标题】：How to align items on the far left and items on the far right of a HTML/Javascript list?如何对齐 HTML/Javascript 列表最左侧的项目和最右侧的项目？
【发布时间】：2017-09-29 08:55:26
【问题描述】：

我很难按自己的意愿格式化项目列表。

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

这里有一个链接来说明我的意思。

list arrangement

我该怎么做呢？我听说桌子可能是最简单的，但我也被告知要尽量远离桌子。

【问题讨论】：

嗨，你试过 float:left;和浮动：对；？能否请您上传您的代码，以便我们解决您的问题
您可以添加一个 jsfiddle 链接或您想要的代码 sn-p。

标签： javascript html list listview alignment

【解决方案1】：

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

【讨论】：

【解决方案2】：

我实际上会推荐表格，这似乎是 tabular 数据.. 对表格一词眨眼，因为表格中的表格是用于表格数据的。如果您仍想使用列表，我建议您做 2 个列表并让 tableA 浮动：左，并让 tableB 浮动：右；

检查一下这个小提琴：

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>

【讨论】：