时间戳

首页 > 解决方案 > h1 & p1 不会显示内联

html - h1 & p1 不会显示内联

问题描述

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

我尝试将它们放在一个 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;
}

标签： htmlcsshtml-heading

解决方案

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

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

推荐阅读