好了,这就是我现在的HTML。
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>GeoVillage - A Community</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id=header>
<img id=logo src="/logo.png" alt="GeoVillage Community" style="width:500px;height:128px;">
<span id=logreg>
<?php
if(isset($_SESSION['loggedon']) && $_SESSION['loggedon'] == true){
echo '<a href=/logout>
<img id=logout src="/logout.png" alt="Logout">
</a>';
} else {
echo '<a href=/login>
<img id=login src="/login.png" alt="Login">
</a>';
echo '<a href=/login/register.php>
<img id=register src="/register.png" alt="Register">
</a>';
}
?>
</span>
</div>
<ul>
<li><a href="/vatsim">FSX/X-P/P3D Vatsim Online Material</a></li>
<li><a href="/dev2">Development Page</a></li>
</ul>
<?php
echo($_SESSION["loggedon"]);
?>
</body>
</html>
这是我的CSS文件
body{
background-color: #33ccff;
margin: 0px;
}
#header{
display:inline;
现在,登录和注册按钮在顶部,但基本上与横幅的底部对齐。我该如何定位它,使其与横幅的顶部对齐?
试试这个
#logreg {vertical-align: top;display: inline-block;}
方法1
这使得你的标题宽度更宽,以允许登录/注册按钮适合头部容器。然后,#logoreg CSS在登录/注册按钮容器的顶部添加一个边距,当指定正确的px量时,它与徽标居中。
CSS:#header {
display: block;
width: 105%;
}
#logreg {
float: right;
margin-top: 15px;
}
方法2
改变你的横幅图像的宽度。
<img id="logo" src="/logo.png" alt="GeoVillage Community" style="width: 700px;height:96px;">
然后把它放到你的CSS中:
#logreg {
margin-top: 15px;
float: right;
display: inline-block;
}