我想将图像和h1对齐在同一行中。我已附上我的源代码，它不起作用。有人可以告诉我这是怎么回事。
<head>
.header img{
float: left;
width: 2px;
height: 3px;
background: #555;
}
.header h1{
position: relative;
top: 18px;
left: 10px;
}
<title> home page </title>
</head>
<body>
<div class="header">
<img src="greenlock.jpg" alt="logo" />
<h1> UNIVERCITY OF GREENLOCK <h1>
</div>
最佳答案
使用display : inline-block
.header img{
display:inline-block;
width:10px;
height:3px;
background:#555
}
.header h1{
display:inline-block;
position: relative;
}<div class="header">
<img src="greenlock.jpg" alt="logo" />
<h1> UNIVERCITY OF GREENLOCK <h1>
</div>您还可以使用
float:left图像和float:right标题.header img{
float:left;
width:10px;
height:3px;
background:#555
}
.header h1{
flaot:right;
position: relative;
}<div class="header">
<img src="greenlock.jpg" alt="logo" />
<h1> UNIVERCITY OF GREENLOCK <h1>
</div>