如何将文本放在 <h> 标签的右侧？

Question

我正在创建一个网站，但我陷入了一件可能很简单的事情。我有一个<h4>标签，上面写着一些东西，我想要在同一行上，但右侧有一些空格，以便有一个<p>带有一些文本的标签。无论我做什么，它要么获取标签旁边的文本<h4>，要么当我执行类似操作时align:right将其放在<h4>标签下。这是我的代码：

<div class="col-md-8">
    <div class="col-md-8">
        <h1 id="title">Education</h1>
        <h4 style="display: inline">University</h4>
        <p style="align=right"> 2009 - 2015<br></p>
        <p style="display: inline">B.Sc in Computer Science</p>
        <p style="display: inline"> Grades: 2:1</p>
        <span>
            <h4>Highschool</h4>
            <p>2006 - 2009</p>
        </span>   
    </div>
</div>

我正在使用引导程序来进行网格布局。我不知道这是否在这个问题中起作用。

Answer 1

无需更改代码结构

使同一行中的元素内联，并将日期范围向右浮动。

.title-right {
    float: right;
}

.title-left {
    display: inline;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-8">
    <div class="col-md-8">
        <h1 id="title">Education</h1>
        <h4 class="title-left">University</h4>
        <span class="title-right"> 2009 - 2015</span>
        <span>B.Sc in Computer Science</span>
        <span> Grades: 2:1</span>
        <span>
            <h4>Highschool</h4>
            <p>2006 - 2009</p>
        </span>   
    </div>
</div>

这样，您就不必像Maddy 的回答那样在标头中包含日期范围，这可以工作，但它不是正确的 HTML5 语义，因为您在标头中包含的内容并不包含在其中。

还有一些事情需要考虑：

• 不要将段落用于非段落的内容。您可以用多个元素构建一条线。这就是<span>目的。这样你也不必到处添加display:inline。
• 不要使用内联样式。创建类并在其中添加样式。

更好的代码结构

老派方式

如果您想将所有内容放在两列中，只需<div>为行创建 s 并使左侧文本内联，同时将右侧文本浮动到右侧。

.float-right {
    float: right;
}

.inline {
    display: inline;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-8">
    <div class="col-md-8">
        <h1 id="title">Education</h1>
        <div>
            <h4 class="inline">University</h4>
            <span class="float-right"> 2009 - 2015</span>
        </div>
        <div>
            <span>B.Sc in Computer Science</span>
            <span class="float-right"> Grades: 2:1</span>
        </div>
        <div>
            <h4 class="inline">Highschool</h4>
            <p class="float-right">2006 - 2009</p>
        </div>
    </div>
</div>

新办学方式

使用与上一节相同的 DOM，您只需将 Flexbox 放置到该行并将子项与两侧对齐即可。此解决方案假设您只有 2 个孩子，每一方一个。

.side-layout {
    display: flex;
    justify-content: space-between;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-8">
    <div class="col-md-8">
        <h1 id="title">Education</h1>
        <div class="side-layout">
            <h4>University</h4>
            <span> 2009 - 2015</span>
        </div>
        <div class="side-layout">
            <span>B.Sc in Computer Science</span>
            <span> Grades: 2:1</span>
        </div>
        <div class="side-layout">
            <h4>Highschool</h4>
            <p>2006 - 2009</p>
        </div>
    </div>
</div>