Question

在我要演示的演示网页上，div中包含以下元素：

<div class="au-message-list" id="project_message">

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

extension UILabel { @IBInspectable var isShadowOnText: Bool { get { return self.isShadowOnText } set { guard (newValue as? Bool) != nil else { return } if newValue == true{ self.layer.shadowColor = UIColor.black.cgColor self.layer.shadowRadius = 2.0 self.layer.shadowOpacity = 1.0 self.layer.shadowOffset = CGSize(width: 2, height: 2) self.layer.masksToBounds = false } } } }

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>

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

2 个答案: