Выравнивание элементов заголовка на HTML-странице - PullRequest
Новая
       29

Выравнивание элементов заголовка на HTML-странице

0 голосов
/ 15 сентября 2018

Я пытаюсь выровнять свой элемент заголовка, и я не могу выровнять так, как я хочу. Я пытался вывести университет Бентаукур прямо под UOB в блоке заголовков, но либо он приближается к UOB, либо намного ниже. Может кто-нибудь сказать, где я делаю не так.

Это мой код. 

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      background-color: #f1f1f1;
      background-repeat: no-repeat;
      background-size: cover;
    }
    
    a,
    a:hover {
      text-decoration: none;
      float: left;
      font-family: Impact, Charcoal, sans-serif;
    }
    
    #home,
    #phone {
      float: right;
    }
    
    #headname {
      float: left;
      font-family: "Comic Sans MS", cursive, sans-serif;
    }
    
    #home {
      padding-right: 10px;
    }
    
    #king {
      padding-left: 10px;
    }
    
    .head {
      background-color: #174e80;
    }
  </style>
</head>

<body>

  <header class="w3-container head">
    <h2>
      <a id="gly" href="kuchbhi.html" style="color:#f2f2f2">
        <span style="float:left;">UOB</span>
        <p style="float:left;" id="king"><span class="glyphicon glyphicon-education"></span></p>

      </a>

      <p id="phone" style="padding-right:30px;padding-top:10px;color:#f2f2f2"><span class="glyphicon glyphicon-earphone"></span></p>
      <p id="home" style="padding-right:30px;padding-top:10px;color:#f2f2f2"><span class="glyphicon glyphicon-home"></span></p>
    </h2>
    <br>
    <br>
    <p id="headname" style="font-size:12px; padding-left:6px;color:#f2f2f2">University of Bentaucur</p>

    <br>

  </header>

</body>

</html>

В элементе Header мне нужно получить элемент <p> Университета Бангалора под строкой UOB.

Элемент <p> оставляет некоторое место в начале строки

Ответы [ 2 ]

0 голосов
/ 16 сентября 2018

попробуйте изменить значение отступа слева от 6px до 3px - 

<p id="headname" style="font-size:12px; padding-left:3px;color:#f2f2f2">University of Bentaucur</p>
0 голосов
/ 15 сентября 2018

Если вы добавите clear: left; к рассматриваемому <p>, нужный текст не будет отображаться на странице, пока не будут удалены все элементы, которые обычно отображаются слева от <p>. 

<p id="headname" style="font-size:12px; padding-left:6px;color:#f2f2f2; clear:left;">University of Bentaucur</p>
...