h1 & p1 не будут отображаться встроенными - PullRequest
Новая
       37

h1 & p1 не будут отображаться встроенными

0 голосов
/ 25 мая 2018

Я долго искал, почему мой заголовок и абзац не будут отображаться встроенными.

Я пытался поместить их в 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 голосов
/ 25 мая 2018

Вы можете легко достичь этой структуры с помощью 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;
}
0 голосов
/ 25 мая 2018

flex - хороший вариант для его использования, стоит попробовать.«p1» не является тегом html, вы можете использовать тег «p».

Вы можете попытаться исправить это .. В своем коде, задав (ширина 50% для каждого элемента, float: left, text-align: right для right элементов) элементам, эта проблема может быть исправлена.

0 голосов
/ 25 мая 2018

Поместите 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>

Удалите float справа от p1

Добавьте новый CSS, как показано ниже 

.right{
    float: right;
}

Просто предположите, что у вас есть два поля вверхний колонтитул, как показано ниже1014 *

...