Question

我在CSS文档中遇到了两个div类的问题。这些类分别命名为homeBody和signupBody。

我正在尝试将网站的输入表单居中，但是当我将div标签从homeBody更改为signupBody时，标题消失了。我复制并粘贴了homeBody类以为signupBody类创建CSS规则，所以我不知道为什么它们具有不同的效果。

我想做的就是把signupBody类的边距居中，如果有人可以让我知道我做错了什么，我将不胜感激。

<?php  
    session_start();
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="This is an example of a meta description.  This will often show up in search results.">
        <meta name=viewport content="width=device-width, initial-scale=1">
        <title>TAG</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <nav>
        <div id="headerContainer">
            <?php 
                if (isset($_SESSION['userID'])) {
                    echo    '<div id="logoutForm">
                                <form action="includes/logout.inc.php" method="post">
                                    <button type="Submit" name="logout-submit">Logout</button>
                                </form>
                            </div>
                            <div class="upload">
                                <form action="upload.php" method="POST" enctype="multipart/form-data">
                                    <input type="file" name="file">
                                    <button type="submit" name="submit">New Post</button>
                                </form>
                            </div>';
                }
                else {
                    echo    '<div id="loginForm">
                                <form action="includes/login.inc.php" method="post">
                                    <input type="text" name="mailuid" placeholder="Username/E-mail">
                                    <input type="password" name="password" placeholder="Password">
                                    <button type="Submit" name="login-submit">Login</button>
                                </form>
                            </div>
                            <div id="signupForm">
                                <a href="signup.php">or Signup</a>
                            </div>';
                }
            ?>          
        </div>
    </nav>
<body>

<?php
    require "header.php";
?>
    <div class="homeBody">
        <div class="signupBody">
            <h1>Signup</h1>
            <?php 
                if (isset($_GET["error"])) {
                    if ($_GET["error"] == "emptyfields") {
                        echo '<p>Fill in all fields!</p>';
                    }
                    else if ($_GET["error"] == "invalidemail") { 
                        echo '<p>Invalid Email!</p>';
                    }
                }
                else if (isset($_GET["signup"])) {
                    if ($_GET["signup"] == "success") {
                        echo '<p>Signup Sucessful!</p>';
                    }
                }
            ?>      
            <form action="includes/signup.inc.php" method="post">
                <input type="text" name="firstName" placeholder="First Name">
                <br>
                <input type="text" name="lastName" placeholder="Last Name">
                <br>
                <input type="text" name="userName" placeholder="User Name">
                <br>
                <input type="text" name="email" placeholder="E-mail">
                <br>
                <input type="password" name="password" placeholder="Password">
                <br>
                <input type="password" name="pwd-repeat" placeholder="Repeat password">
                <br>
                <button type="submit" name="signup-submit">Signup</button>
            </form>
        </div>
    </div>

<?php
    require "footer.php";
?>

</body>
<footer>
    <div id="footerContainer">
        <ul>
            <li class="footerList button"><a href="index.php">Home</a></li>
            <li class="footerList button"><a href="index.php">Activity</a></li>
            <li class="footerList button"><a href="index.php">Trending</a></li>
            <li class="footerList button"><a href="index.php">Chat</a></li>
        </ul>
    </div>
</footer>
</html>

.button{
background-color:#333;
color:#fff;
padding:10px 15px;
border:none;
}
.button: hover{
    background:red;
    color:#fff;
}
#footerContainer{
    background-color:#333;
    bottom: 0px;
    left: 0px;
    padding: 10px 0px;
    position: fixed;
    text-align: center;
    width: 100%;
}
#footerContainer .footerList{
    display: inline;
    list-style: none;
    padding: 10px 10px;
}
#footerContainer .footerList a{
    color: white;
    text-align: center;
    text-decoration: none;
}
#footerContainer .footerList a: hover{
    color: red;
}
#headerContainer {
    background-color:#333;
    height: 60px;
    width: 100%;
    position: fixed;
}   
.homeBody {
    margin: 60px 0px 40px 0px;
}
.signupBody {
    margin: 60px auto 40px auto;

}
#loginForm {
    position: absolute;
    top: 10px;
    right: 5px;
}
#logoutForm {
    position: absolute;
    top: 10px;
    right: 5px;
}
.upload {
    position: absolute;
    top: 20px;
    right: 0px;
}
#signupForm a {
    color: white;
    text-decoration: none;
    position: absolute;
    top: 35px;
    right: 5px;
}

Answer 1

您需要为.homeBody设置宽度，并将margin设置为auto。

div标签混乱尝试将输入表单居中

1 个答案: