如何对齐多个项目？答案

【问题标题】：How to align several items?如何对齐多个项目？
【发布时间】：2020-06-11 22:05:54
【问题描述】：

我有这个代码...

                <div class="table">

                    <ul>
                        <li><a>smth</a></li>
                        <li><a>smth</a></li>
                        <li><a>smth</a></li>
                        <li><a>smth</a></li>
                        <li><a>smth</a></li>
                    </ul>
                </div>

...还有这个

* {
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    font-family: 'Montserrat', sans-serif;
}

div.table ul li a {
    float: left;
    transition: .2s;
    display: inline-block;
}

嗯，每个“smth”都显示得很近。

现在输出：

smthsmthsmthsmthsmth

...它们都向左浮动。

我需要什么：

smth smth smth smth smth

...漂浮在最中间。

【问题讨论】：

为什么不添加一些填充或边距？它的列表不是 p，而您试图在行中列出列表
...并从a 中删除float。
删除浮动将使所有内容都在单独的行中，我添加了浮动以将其全部对齐在一行中
让父级将它们居中对齐（使用 flexbox 之类的东西）并在您想要空格或填充/边距的地方添加 &nbsp
使用@roko C. Buljan 的答案并将这一行添加到.table ul 样式：justify-content: center;，请自行研究编程。 SO 不是免费的代码编写服务

标签： html css alignment text-align

【解决方案1】：

使用flex 和padding。另外，在 A 元素上使用 display: block，不要过度使用 LI 元素，像对待 TR 或 TD 元素一样对待它们

* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  font-family: 'Montserrat', sans-serif;
}

.table ul {
  display: flex;
  justify-content: center;
}

div.table ul a {
  display: block;
  padding: 0 10px;
}

<div class="table">
  <ul>
    <li><a>smth</a></li>
    <li><a>smth</a></li>
    <li><a>smth</a></li>
    <li><a>smth</a></li>
    <li><a>smth</a></li>
  </ul>
</div>

【讨论】：

有点工作，我得到了“smth”之间的距离，但它们仍然不在中间