HTML/CSS 如何必须在同一行上添加标签？

Question

我不知道这是否是这个问题的正确标题，我很抱歉，无论如何......所以我在过去几天一直在学习 HTML 和 CSS。我想说我已经取得了很大的进步，但遇到了一个问题。我制作了一个 ul 列表，里面有几个 li，我想让它们都在同一行(屏幕顶部，堆栈溢出的样子有点像下拉菜单是标题，新闻提要和问题是列表)。然而在我看到的视频中它告诉我这样做:

h1 {
    margin 0;
    display: inline;
}

ul {
    margin: 0;
    display: inline;
}

在视频中，ul 现在是水平的，而不是垂直的。我已经在网上搜索了一段时间，找不到任何东西，所以我不得不来这里。现在我想知道是否有人可以给我正确的代码来解决这个问题，并将标题和 ul 放在屏幕顶部的同一行，事实上，如果我可以获得某种链接以找到更好的学习 HTML 和 CSS 的方法？谢谢。

Answer 1

该示例将并排放置两个 ul，但不会对 ul 中的 li 执行任何操作。

相反，您想要:

li {
  display: inline;   // or inline-block
}

示例:

h1 {
    margin 0;
    display: inline;
}

ul {
    margin: 0;
    display: inline;
}

li {
   border: 1px solid black;
   margin: 0;
   display: inline-block;
}

<h1>Heading</h1>

<ul>
  <li>one</li><li>two</li><li>three</li>
</ul>