如何将 HTML 元素放在一行中？答案

【问题标题】：How to put HTML elements in a line?如何将 HTML 元素放在一行中？
【发布时间】：2021-03-17 03:08:02
【问题描述】：

我有这个代码...

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

...但它不会改变对齐方式。

【问题讨论】：

试试：li { display: inline; }
也不行。对了，我已经得到答案了

标签： html css alignment html-lists text-align

【解决方案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>

【讨论】：

正是我需要的！将在 12 分钟内接受您的回答（当我能够接受时）

【解决方案2】：

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

【讨论】：

【解决方案3】：

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>

【讨论】：

【解决方案4】：

试试这个：

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

【讨论】：

它将所有内容放在中间，但不在一行中

【解决方案5】：

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

【讨论】：

不，这不是我需要的