我正在尝试对齐我的标题元素,但我无法以我想要的方式对齐。我尝试将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>
元素在行的开头留下一些空间
如果将clear: left;
添加到有问题的<p>
中,则在清除通常出现在<p>
左侧的所有元素之前,页面上不会显示所需的文本。
<p id="headname" style="font-size:12px; padding-left:6px;color:#f2f2f2; clear:left;">University of Bentaucur</p>
尝试将填充左侧值从6px更改为3px -
<p id="headname" style="font-size:12px; padding-left:3px;color:#f2f2f2">University of Bentaucur</p>