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

如何正确实现目标

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

这样您就不必像Maddy's answer那样在标题中包含日期范围，这有效，但它不是正确的HTML5语义，因为您在标题中包含了内容没有去那里。

还有一些事情需要考虑：

不要使用段落来表示非段落的内容。您从多个元素构建一条线。这就是<span>的用途。这样，您也无需在任何地方添加display:inline。
不要使用内联样式。创建类并在那里添加样式。

＆＃13;

.title-right {
    float: right;
}

.title-left {
    display: inline;
}

＆＃13;

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

＆＃13;

更好的代码结构

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

＆＃13;

.float-right {
    float: right;
}

.inline {
    display: inline;
}

＆＃13;

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

＆＃13;

Answer 2

在h4（标题）标记中使用span标记。

<div class="col-md-8">
  <h1 id="title">Education</h1>
  <h4 style="display: inline">University
    <span style="float:right"> 2009 - 2015</span>
  </h4>
  <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>

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

2 个答案:

如何正确实现目标

更好的代码结构