html - 使用 CSS 内联渲染多个 HTML 元素

Question

在我试图启动的演示网页上，我在 div 中有以下元素：

 <div class="output">
      <code class="input-output">hello:</code>
      <samp clsss="proc-output">world</samp>
    </div>

如何使两个元素呈现在同一行，如下所示：

hello: world

Answer 1

您可以将这些元素定义为内联（在 css 文件中）：

code.input-output, samp.proc-output {
    display: inline;
}

或者您可以使用跨度：

<div class="output">
    <span class="input-output">hello:</span>
    <span clsss="proc-output">world</span>
</div>

您应该使用内联元素。这是 span 和 div 之间的主要区别。

Answer 2

display:inline-block或者display:inline会做你需要的。

.input-output, .proc-output {
  display:inline-block;
}

<div class="output">
  <code class="input-output">hello:</code>
  <samp clsss="proc-output">world</samp>
</div>