如何内联放置标题和段落标签[关闭]答案

【问题标题】：How to place heading and paragraph tags inline [closed]如何内联放置标题和段落标签[关闭]
【发布时间】：2020-07-27 17:11:29
【问题描述】：

我想像这样并排（内联）放置标题和段落标签

使用 bootstrap 4，这是我尝试的方法

<div class="col-md-1 text-left">
    <span class="d-inline">
        <h2>
            {{ event.formattedDate.slice(9, -15) }}
        </h2>
    </span>
    <span class="d-inline">
        <p>{{ event.formattedDate.slice(5, -17) }}</p>
        <p>{{ event.formattedDate.slice(0, 3) }}</p>
    </span>
</div>

这反而给了我这个

我怎样才能做到这一点？

【问题讨论】：

try - .col-md-1 {display: flex; flex-direction: row;}
这能回答你的问题吗？ Inline CSS Image and Paragraph inline
实际使用 bootstrap d-flex flex-row 成功了
validator.nu — 您的 HTML 无效。编写有效的 HTML。

标签： html css bootstrap-4

【解决方案1】：

您不应将块元素（如 <h2> 和 <p>）置于内联元素（如 <span>。You can read about it here.

您应该使用 flex 容器，如下所示：

.box {
  /* this is what you want */
  display: flex;
  align-items: center;
  background-color: black;
  color: white;
  width: fit-content;
  padding: 16px;
}

h2 {
  font-size: 64px;
}

p {
  font-size: 24px;
}

h2, p {
  margin: 0;
}

.box div {
  margin-right: 16px;
}

<div class="box">
    <div>
        <h2>
            08
        </h2>
    </div>
    <span>
        <p>Aug</p>
        <p>Sat</p>
    </span>
</div>

玩得开心，去创造伟大的东西！

【讨论】：

谢谢，我已经删除了 h2 标签周围的 span，并在父 div 上使用了 d-flex flex-row 类。
太好了，只要确保您了解这些类在幕后的作用。这样，当您将东西放入弹性容器时，您就不会遇到麻烦??

【解决方案2】：

这对你有用吗？

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex">
    <h1>8</h1>
    <div class="row ml-2">
    <span class="col-12">month</span>
    <span class="col-12">day</span>
    </div>
</div>

【讨论】：