h3之后的文本内联

Question

如何让文本在H3标记后显示为内联？

<div>

    <H3>asdfsadfasd</H3> <p>afadsfadsf</p>
</div>

jsfiddle

Answer 1

默认情况下，h3和p都是“块元素”。这意味着它们在上方和下方创造空间以确保它们是给定线上的唯一东西（从技术上讲，它们“水平地填充它们的父元素”）。使用CSS，可以通过将规则display:inline应用于这两个属性来覆盖此行为。请参阅下面的示例。

您可以在Mozilla开发人员网络here上阅读有关块级元素的更多信息。

h3, p { display:inline }

<div>
    <H3>asdfsadfasd</H3> <p>afadsfadsf</p>
</div>

Answer 2

一些选项：

• 浮动元素：

  h3, p {
      float: left;
  }
  div {
      overflow: hidden;
  }
  

  h3, p {
    float: left;
  }
  div {
    overflow: hidden;
  }

  <div>
    <h3>asdfsadfasd</h3>
    <p>afadsfadsf</p>
  </div>

• 浮动+阻止：

  h3 {
      float: left;
  }
  div {
      overflow: hidden;
  }
  

  h3 {
    float: left;
  }
  div {
    overflow: hidden;
  }

  <div>
    <h3>asdfsadfasd</h3>
    <p>afadsfadsf</p>
  </div>

• 内联元素：

  h3, p {
      display: inline;
  }
  

  h3, p {
    display: inline;
  }

  <div>
    <h3>asdfsadfasd</h3>
    <p>afadsfadsf</p>
  </div>

• 内联块元素：

  h3, p {
      display: inline-block;
  }
  

  h3, p {
    display: inline-block;
  }

  <div>
    <h3>asdfsadfasd</h3>
    <p>afadsfadsf</p>
  </div>

Answer 3

您回答了自己的问题，只需使用display: inline即可。演示：http://jsfiddle.net/vbr39bm2/1/

我建议不要在全球范围内执行此操作，而是应用一个类，以便在您的网站上为您重复使用该模式。更像是这样：http://jsfiddle.net/vbr39bm2/2/

您可能想要阅读（并使用）display属性：http://css-tricks.com/almanac/properties/d/display/