使用 CSS 对齐列表答案

【问题标题】：List Alignment with CSS使用 CSS 对齐列表
【发布时间】：2018-08-08 15:20:47
【问题描述】：

我有一个显示带小数的数字的列表。我希望它们都在中心对齐，但它们有不同的十进制长度，所以这有点导致一些 UI 问题。

例如它当前的显示类似

它当前的 HTML & CSS 很简单

.my-list {
  text-align: center
}

<ul class="my-list">
  <li>14.88</li>
</ul>

谁能告诉我如何更新我的 CSS 使其显示类似这样的内容

14.88
18.123
20.452
etc

简而言之，我希望列表居中对齐，但我希望列表项左对齐。

【问题讨论】：

你能提供你的代码（html，css）吗？
Aligning decimal points in HTML的可能重复
我觉得用JS来对齐一个简单的列表是大材小用
“我希望它们在中心对齐，但同时对齐到最左边的部分。”这是没有意义的，除非您希望列表居中且列表项左对齐。
@JonP 是的，我希望列表位于中心，但项目要左对齐

标签： html css

【解决方案1】：

假设您希望列表本身以左对齐的项目居中：

选项 1： 将列表用作块，但宽度固定

ul {
  padding: 10px;
  list-style-type: none;
  background-color:#ccc;
  width: 25%;
  /*Centers the list*/
  margin: 0 auto;
}

/*Not required in my example, but you may need it*/
li
{
  text-align:left;
}

 <ul>
    <li>14.88</li>
    <li>18.123</li>
    <li>20.452</li>
    <li>10.22</li>
    <li>3.1</li>
  </ul>

选项 2： 将列表包装在 div 中并将列表设置为 inline-block

div {
  /*Centers this list*/
  text-align: center
}

ul {
  padding: 10px;
  list-style-type: none;
  background-color: #ccc;
  display: inline-block;
  /*Left align contents of list*/
  text-align: left;
}

<div>
  <ul>
    <li>14.88</li>
    <li>18.123</li>
    <li>20.452</li>
    <li>10.22</li>
    <li>3.1</li>
  </ul>
</div>

有关更多居中选项，请参阅本文：https://css-tricks.com/centering-css-complete-guide/

【讨论】：

【解决方案2】：

您正在使用 text-align:center.

试试同样的方法：

.my-list {
  text-align: left
}

应该这样做。

【讨论】：

【解决方案3】：

您可以尝试使用相同的列表样式 css 属性，以删除项目符号

.myList{
  text-align:left;
  list-style:none;
}

【讨论】：

是的，但是如果我左对齐，所有的东西都会移到最左边...我希望它们留在中心，但只是数字正确对齐

【解决方案4】：

.mylist{
list-style:none;
width:100px;
}
.mylist li{
text-align:center;
}

<!DOCTYPE html>
<html>
<body>
<ul class="mylist">
  <li>14.88</li>
  <li>18.123</li>
  <li>20.452</li>
  <li>10.22</li>
  <li>3.1</li>
</ul>  

</body>
</html>

【讨论】：