html - 如何将文本放在 标签的右侧？

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>

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

Answer 1

没有代码结构的改变

将同一行中的元素内联，并将日期范围 float 到右侧。

.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's answer 那样在标题中包含日期范围，这行得通，但它不是正确的 HTML5 语义，因为您在 header 中包含了不存在的内容。

还有一些需要考虑的事情:

• 不要将段落用于非段落的内容。您从多个元素构建一条线。那就是<span>是为了。这样你也不必添加 display:inline无处不在。
• 不要使用内联样式。创建类并在那里添加样式。

更好的代码结构

老派方式

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

.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 个 child ，每边一个。

.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>