如何对齐多个项目？

Question

我有这个代码...

                <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

...浮动在最中间。

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

如何对齐多个项目？

How to align several items?

html

css

text-align

alignment