把H4和P的第1行放在同一水平线上，但是P的第2行要和P的第1行垂直对齐？答案

【问题标题】：Put H4 and 1st line of P on the same horizontal line, but the 2nd line of P should be vertically aligned with the 1st line of P?把H4和P的第1行放在同一水平线上，但是P的第2行要和P的第1行垂直对齐？
【发布时间】：2021-10-28 14:40:12
【问题描述】：

我正在尝试为舞台剧创建 CSS 样式表，其中角色 (H4) 出现在与对话（段落）的第一行相同的水平线上。同时，我希望当对话换行时，对话的第 2 行开头将与对话的第 1 行开头垂直对齐，like this。

我已经设法将角色和对话的第一行放在同一条水平线上，两者都使用display: inline，并为对话设置margin-left: 30px，以便在角色和对话。那太好了。问题是，对话的第二行向左走，并与角色垂直对齐，而不是与对话的第一行对齐，如果你在下面运行我的代码，你会看到。

现在我尝试删除两者的display: inline，并将对话设置为margin-left: 150px，这解决了问题——我的对话的第二行现在与我的对话的第一行垂直对齐。但是我的对话的第一行不再与我的角色水平对齐。

看来我只能：

将对话的第一行与角色水平对齐，或
将对话的第二行与对话的第一行垂直对齐

但不是两者兼而有之。

我是 CSS 新手，我在网上搜索过，但找不到任何解决方案。有没有办法做到这两点？

我可以在下面的 CSS 样式表（不是 HTML）中添加或删除任何内容以允许我执行此操作吗？

body {
    font-family: Times New Roman;
    font-size: 12pt;
    font-weight: normal;
    line-height: normal;
    margin-top: 1in;
    margin-bottom: 1in;
    margin-left: 1in;
    margin-right: 1in;
    background-color: white;
}

h1, h2, h3, h4, h5, h6 {
    -webkit-font-smoothing: antialiased;
    cursor: text;
    position: relative;
    font-size: 12pt;
}

h1 {    /* Act */
    margin-left: 0;
    font-weight: bold;
    text-transform: uppercase;
}

h2 {    /* Scene */
    margin-left: 0;
    font-weight: bold;
    text-transform: uppercase;
}

h3 {    /* Stage Directions */
    margin-left: 0;
    font-weight: normal;
    font-style: italic;
}

p + h3::after {
    content: "";
    display: block;
    block-size: 12px;
}

h4 {    /* Character */
    margin-left: 0;
    font-weight: normal;
    text-transform: uppercase;
    margin-bottom: 0px;
    display: inline;
}

h4::after {
    content: ":";
}

h4 + p { /* Dialogue */
    margin-left: 30px;
    margin-right: 0;
        margin-top: 0;
    margin-bottom: 0;
    text-align: left;
    display: inline;
}

h4 + p::after {
    content: "";
    display: block;
    block-size: 20px;
}

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <title>ACT 1</title>
    </head>
<body>
<h1>ACT 1</h1>

<h1>Scene 1</h1>

<h3>These are the stage directions.</h3>

<h4>CHARACTER 1</h4>

<p>This is dialogue. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>

<h4>CHARACTER 2</h4>

<p>This is also dialogue. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </p>

<h3>Here are more stage directions.</h3>

</body>
</html>

【问题讨论】：

我能问一下您为什么不选择并排使用两个 div 吗？一个用于角色，一个用于对话？您可以在桌面上并排显示它们的表格单元格，然后响应式地在移动设备上阻止？
为了回答这两个问题，我选择不使用 divs + 我不想修改 HTML，因为我还不知道如何弄乱 HTML。我昨天刚开始学习 CSS 哈哈。另外，我正在使用一个在前端使用 Markdown 的写作应用程序，所以我希望只在后端编辑一次 CSS，这样我就可以导出不同样式的文档，而无需进入并将 HTML 代码添加到每次都是前端。但如果这真的是唯一的方法（结合 Markdown 和 HTML），我想我可以试一试。
如果您认为将 Markdown 与 HTML 结合是可行的方法，您能告诉我如何将 HTML div 或 flexbox 添加到我的 Markdown 语法中以解决问题吗？如果有帮助，我可能会为此分享我的 Markdown 代码。

标签： html css word-wrap paragraph heading

【解决方案1】：

终于找到了解决方案——我想在这里为可能也需要它的人分享代码。特别感谢 r/css 的 u/sheriffderek 帮助我解决这个问题。

h4 {    /* Character */
    margin: 0;
    float: left;
    font-weight: normal;
    text-transform: uppercase;
}

h4 + p { /* Dialogue */
    padding-left: 100px;
}

h4::after {
    content: ":";
}

【讨论】：

为了让其他用户更好地理解您的问题和答案，请删除与您的具体问题无关的代码。虽然您提供的 CSS 显示了所描述的 HTML，但您应该记住它存在多个问题。只有当 h4 元素的文本保持相同长度时，您的代码才能工作，因为段落具有固定的填充值。在更大的屏幕上，您的段落将显示在一行中。您可以考虑添加 max-length 来限制段落的宽度。