h1 & p1 不会显示内联答案

【问题标题】：h1 & p1 wont display inlineh1 & p1 不会显示内联
【发布时间】：2018-05-25 11:09:45
【问题描述】：

我一直在寻找为什么我的标题和段落不会内联显示。

我尝试将它们放在一个 div 中以内联显示。

我也尝试过不使用 div。

这里是网站现在的样子的屏幕截图 https://gyazo.com/0331b7b59823674705305ff3e8dabd5d

HTML

<!DOCTYPE html>

<head>
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="shortcut icon" type="image/png" href="img/icon.png" />
</head>

<body>
  <div class="header" id="header">
    <h1>Liam Winterbourne</h1>
    <h2>Graphics Designer</h2>

    <p1>phone number</p1>
    <br></br>
    <p1>director@liaamb.co.uk</p1>
  </div>

</body>

</html>

CSS

head {
}

body {
  font-family: "calibri light";
  background-image: url(img/background.jpg);
}

br {
  margin-top: 0px;
}

.header {
  display: inline;
}

.header h1, .header p1 {
  display: inline;
}

h1 {
  display: inline;
  margin-bottom: 0px;
  color: #ffffff;
  font-size: 25px;
  letter-spacing: 7px;
  font-weight: 100;
}

h2 {
  margin-top: 0px;
  color: #ffffff;
  font-size: 15px;
  letter-spacing: 3px;
  font-weight: 100;
}

p1 {
  display: inline;
  float: right;
  color: #ffffff;
  letter-spacing: 2px;
  font-size: 20px;
}

【问题讨论】：

为什么要创建自己的元素而不是使用类？

标签： html css html-heading

【解决方案1】：

您可以使用 flex 轻松实现这种结构。不需要浮动。将您的html更改为这样。查看更新的fiddle

<div class="header" id="header">
   <div style="display: flex;">
     <h1>Liam Winterbourne</h1>
     <p style="margin-left: auto;">director@liaamb.co.uk</p>
   </div>

   <div style="display: flex;">
     <h2>Graphics Designer</h2>
     <p style="margin-left: auto;">phone number</p>
   </div>
</div>

CSS

body {
  font-family: "calibri light";
  background-image: url(img/background.jpg);
}

.header {
  display: inline;
}


h1 {
  margin-bottom: 0px;
  color: #ffffff;
  font-size: 25px;
  letter-spacing: 7px;
  font-weight: 100;
  margin-top: 0px;
}

h2 {
  margin-top: 0px;
  color: #ffffff;
  font-size: 15px;
  letter-spacing: 3px;
  font-weight: 100;
}

p {
  color: #ffffff;
  letter-spacing: 2px;
  font-size: 20px;
}

【讨论】：

感谢您的回复，我会更多地研究 flex，所以我不会再遇到这个问题了。
html中仍然没有p1标签:)

【解决方案2】：

像下面这样放置你的html

<div class="header" id="header">
    <div class="right">
    <p1>phone number</p1>
    <br></br>
    <p1>director@liaamb.co.uk</p1>
    </div>

    <h1>Liam Winterbourne</h1>
    <h2>Graphics Designer</h2>  

</div>

从 p1 中删除浮动

添加新的 CSS 如下所示

.right{
    float: right;
}

假设您在标题中有两个框，如下图所示

如果您将第一个框移到右侧，则底部框由于空白区域而移动到顶部，因此两个框显示在同一行。

【讨论】：

感谢您的洞察力，我想了解这里的问题所在。是因为标题在前吗？我读到它们像积木一样工作并且占据了整条生产线。

【解决方案3】：

flex 是一个不错的选择，应该尝试一下。 'p1' 不是 html 标签，你可以使用 'p' 标签。

您可以尝试解决此问题。在您的代码中，通过将（每个元素的宽度为 50%，float:left，text-align:right 用于右元素）赋予元素，这个问题可能会得到解决。

【讨论】：