Question

好的，现在这是我的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;

现在，“登录”和“注册”按钮位于顶部，但与横幅的底部基本对齐。我如何定位它以便与横幅的顶部对齐？

Answer 1

试试这个

#logreg {vertical-align: top;display: inline-block;}

Answer 2

<方法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;
}

如何将项目准确放置在CSS的目标位置

2 个答案: