我们首先来看看现在的理想和现实。

虽然我们现在现实还没有达到理想的效果，但现在至少我们已经明白为什么课后帮和HWHelper为什么不在一行了，为什么呢？那就是因为他们都是块元素。那么有没有什么办法让这两个元素编程行内元素，一旦成为行内元素，他们不就跑到一行去了吗。所以我们来看看方法一。

方法一就是使用行内元素，行内元素可以摆在一行，我们现在明确的知道，h1标签和p标签他们都是块元素，所以我们该用哪个元素呢？

我们接触过的行内元素就是a标签，我们是否可以使用a标签来解决这个问题呢？其实a标签是不合适的，因为a标签都是应用于超链接，那么课后帮和HWHelper他们其实都不是超链接，或者说我们并不希望他是超链接。那么问题来了，就是除了a标签之外，有没有用于文字的行内标签元素呢？

答案是必须的，那就是span标签，span的意思就是小范围的意思，主要用于一小段文字，这正符合我们的要求。至于行不行我们试试再说。首先我们把HWHelper换成span标签试试。

当把HWHelper从p标签换成span标签，现在就变成行内元素了。他的宽度也随之缩小，也就是和内容宽度是一样的。但是效果仍然没有达到，我们是否也需要将h1换成span标签呢，我给大家的建议是最好不要换。为什么呢？这里我们需要引入一个很重要的概念。那就是标签语义化。

我们的网站如果发布到网络上，搜索引擎会派出网络蜘蛛来爬取我们网站的关键字，从而在用户搜索到相关的关键字的时候，把我们的网站呈现给用户。搜索引擎派出的网络蜘蛛毕竟不是人， 它其实不会看浏览器的效果，而是通过HTML代码来识别我们的页面。 所谓识别页面其实就是通过HTML中标签来识别我们的内容。例如那些是标题，那些事段落文字，那些是图片都是通过标签来爬取的。从这个角度看，那课后帮用h1标签就再适合不过了，因为他就是我们整个网站的标题。然后网络蜘蛛过来一爬取就知道，原来这个网站的标题就叫做课后帮，这样他就明白了。

标签语义化的另一个好处就是代码更容易阅读，比如说你写了一个HTML代码，里面全是h1、span、p标签等，那我完全不知道到底哪个是标题，哪个是段落，哪个是一小段文字。 但如果我看到你里面只有一个h1标签，那我马上就知道你到底在说什么。所以说h1标签最好不要换。

现在问题又来了，h1标签不允许换，然后他又是块元素，那怎么办呢？ 其实是有办法的，我们继续往下看。

我们说这个一个标签到底是块元素还是行内元素并不是一成不变的，不是说天生怎样他就是怎么样， 其实我们是可以通过样式来改变的。什么样式呢？

就是display, 我们这里提到两个写法，分别是display:block和display:inline。 那这个有什么作用呢，就是别管你之前写的是块元素还是行内元素，一旦你在样式中指定display：block 它就变成了块元素。同理只要你写上display:inline就会变成行内元素。我们来做一下。

我们为h1标签添加样式，使h1标签从块元素变成行内元素。叫做display：inline；我们希望能够达到我们想要效果，看下图。

此时课后帮就变成行内元素了，然后就跟HWHelper公用一行了。其实我们已经达到了成为一行的效果，现在我们在来看一下现实和理想还有没有差距。

我们发现已经接近了理想效果，但是还是有些细节不太一样，哪里不一样呢？就是课后帮和HWHelper的样式。我们理想的样式是课后帮和HWHelper是顶端对齐，但是我们现实的效果是底端对齐， 那这个是怎么回事呢？

难道说行内元素默认是底端对齐吗？这个理解不是很到位，我们对于这个细节来详细解释一下。

我们通过写过的英文字母书写格式来举例，通过这个例子来深究底端对齐这么一个细节。英文子母在我们书写的时候，都有四线格， 其中从上往下数第三根线其实非常重要，他有一个自己的名字叫做基线， 我们看到图中写的7个字母。 这7个字母其实大多数都是以基线为基准的。首先看字母a、c、e体型比较小，那完全是在第二根和第三根之间。 字母b、d、f比较长，所以他们伸出去了。 长出来的部分伸到了第一根和第二根之间， 那么字母g又比较特别，它其实分上下两个部分。 上半部分也是以基线为准，在2、3根线之间，那么下半部分就伸到了3、4根之间。总而言之，这个基线对于英文字母的书写是非常重要的。

那么我们来看看我们写的这几个字。

其实课后帮这几个字也有一根基线， 但是这根基线并不是我们所想的那样，是不是从最底下开始的， 其实不是。他其实离最低端的部分有一段距离，课后帮这几个字有基线，其实HWHelper也有一根基线。

HWHelper这个基线其实就跟我们的英文字母的基线差不多，但实际上HWHelper的基线和课后帮的基线并不在同一条水平线上。因为文字大小不一样，并且文字类型也不一样，一个是中文一个是英文，所以就更不一样了。那我们现在想做的事情就是让同一行的元素基线对齐。

同一行的行内元素，基线要想对齐，这事怎么办呢？因为基线不一样，咱们得想个办法。我们这里采用的办法就是，让这两个元素互相靠近。

当两个元素互相靠近之后，我们发现现在基线已经在底端对齐了，看起来效果就很好了，但是这个并不是我们理想的效果。我们理想的效果明明是在顶端对齐，那这事该怎么办呢？

我们可以通过样式来控制同一行的行内元素的对齐方式，通过什么样式来控制呢？

vertical:align这么一个东西来控制垂直的对齐方式，现在的状态实际上是一个默认状态。

vertical-align:baseline; 其实就是我们所谓的基线对齐方式，我们不满意，我们不满意谁呢，其实是HWHelper这几个字，我们希望他在顶部。那我们就要对它进行修改。

我们添加一个vertical-align：top；当我们添加这么一个方法时， 就会和整个行内元素顶部最高的对齐。 其实现在就符合我们的要求了，那我们来看看代码。

在代码中我们是有这样的一个样式，就是h1标签中有display:inline；这么写之后，课后帮就变成了行内元素， 然后把HWHelper改成了span标签，那么接下来我们需要让其顶端对齐。我们把代码填上。

此时我们就已经达到我们理想的效果了，这里我们需要把代码写入到我们的sublime中。

这里我们来整理一下我们今天所讲的内容，其实我们主要做了三件事：

第一件事: 是我们把块元素p标签改成了行内元素标签span。

第二件事: 是我们把h1标题标签通过display:inline；变成了行标签，使两行可以共用一行。

第三件事: 是我们不满意底端对齐，所以我们通过vertical-align改变标签的样式。

从而达到我们最理想的效果，以上是我们今天的内容，我们下节会继续分享“浮动腾挪”。