几项如何对齐？

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 smth

…漂浮在中间。

Answer 1

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

null

css lang-css prettyprint-override">* {
  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>