h1＆amp; p1不会显示内联

时间：2018-05-25 11:09:45

标签： html css html-heading

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

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

3 个答案:

答案 0 :(得分：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;
}

答案 1 :(得分：0)

将您的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;
}

假设您在标题中有两个方框，如下图所示 enter image description here

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

答案 2 :(得分：0)

flex是使用它的好选择，应该尝试一下。 ＆＃39; P1＆＃39;不是html标签，你可以使用＆＃39; p＆＃39;标签。

您可以尝试修复此问题。在您的代码中，通过给予元素的宽度为50％（float：left，text-align：对于右元素为右），可以修复此问题。

相关问题
最新问题