html页面中的标题元素对齐方式

问题描述 投票:1回答:2

我正在尝试对齐我的标题元素,但我无法以我想要的方式对齐。我尝试将Bentaucur大学放在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元素中,我需要在UOB线下获得班加罗尔大学的<p>元素。

<p>元素在行的开头留下一些空间

html css twitter-bootstrap css3 alignment
2个回答
1
投票

如果将clear: left;添加到有问题的<p>中,则在清除通常出现在<p>左侧的所有元素之前,页面上不会显示所需的文本。

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

0
投票

尝试将填充左侧值从6px更改为3px -

<p id="headname" style="font-size:12px; padding-left:3px;color:#f2f2f2">University of Bentaucur</p>
© www.soinside.com 2019 - 2024. All rights reserved.