如何使用CSS实现文本内容在同一行对齐显示？

问题原因 #

默认<p>标签属于块级元素，渲染时会独占一行，所以你代码里<h1>内的文本和嵌套的<p>标签内容无法在同一行显示，可通过以下两种方案实现需求：

方案1：调整CSS样式 #

给内部的<p>标签设置行内显示属性，修改后代码如下：

#logo {
  margin      : 0;
  padding     : 0;
  font-family : 'Dosis', sans-serif;
  font-weight : 300;
  text-align  : center;
  width       : 50%;
}
/* 新增下方样式规则 */
#logo p {
  display: inline;
  /* 可按需添加margin-left调整两段文本的间距 */
}

如果后续需要给这段文本设置宽高、上下内边距等属性，也可以把display: inline换成display: inline-block。

方案2：优化HTML标签（更推荐） #

从HTML语义规范来看，标题标签<h1>内部嵌套段落标签<p>不符合语义要求。如果不需要保留<p>标签的特殊语义，直接将其替换为默认行内属性的<span>标签即可，无需额外加CSS就能实现同行效果，修改后HTML代码如下：

<h1 id="logo">This text
  <span>should be inline</span>
</h1>

内容的提问来源于stack exchange，提问作者Erblin Krasniqi