如何将HTML元素放在同一行？

Question

我有这段代码...

        <div class="header">
            <div class="mainh">

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

            </div>          
        </div>

我希望的是将 ul、li 和 a 放在同一行，并保持它们之间的距离相等。
如何实现？

顺便提一下，我已经尝试了一些方法，具体是：

div.table ul li a {
    display: block;
}

...但这并不会改变对齐方式。

- KViiTEN

---

尝试：li { display: inline; } - RatajS

不起作用。顺便说一下，我已经得到了答案。 - KViiTEN

Answer 1

尝试这个：

ul li { float: left; margin-right:30px; }

<div class="header">
  <div class="mainh">
    <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>
  </div>          
</div>

- Majed Badawi

---

正是我所需要的！12分钟后（我可以这样做时）我会接受你的答案。 - KViiTEN

Answer 2

li {
  display: inline;
}

        <div class="header">
            <div class="mainh">

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

            </div>          
        </div>

- RatajS

Answer 3

将显示方式更改为内联而不是块。块会使它在多行中列出。内联会使其看起来像一个一行的标题菜单。

- simon

---

不，那不是我所需要的。 - KViiTEN

Answer 4

尝试一下这个：

.ul {
display: flex;
justify-content: space-evenly;
}

- Anthony Quéré

---

它将所有内容放在中间，但不是单行。 - KViiTEN

Answer 5

ul li 
{
   float: left; /* To make it in a single line */
   margin-right: 50px; /* Distance */
   margin-left: 50px; /* Distance */
}

- Q-1