Question

<html>
<head>
<style>
    #success
    {
        color: #f0f0f0;
        position: relative;
        top: 3%;
        left: 50%;

        padding: 0;
        margin: 0;  
    }
    #errors {
        color: #b81d18;
        position: relative;
        top: 3%;
        left: 15%;

        padding: 0;
        margin: 0;
        }
</style>
</head>
<body>
if (isset($_POST['login']))
{
    $username = trim($_POST['login_username']);
    $password = trim($_POST['login_password']);

    $login = login($username, $password); 
    if ($login === FALSE)
    {
        $errors[] = 'That username/password combination is incorrect.';
        $errors_1 = output_errors($errors);
        echo "<div id='errors'> $errors_1</div>";
        $success[] = "You are logged in as a guest";
        $success_1 = output_errors($success)
        echo <div id='success'>$success_1</div>
    }
}

<form id="password_form" action="" method="post">
    Username: </br>
    <input type="text" name="login_username" value="<?php echo $_POST['login_username']; ?>"> 
    </br>
    Password:</br> 
    <input type="password" name="login_password">
    </br>
    <input type="submit" name="login" value="Log in">  
</form>
</body>
</html>

以上是我的代码。我希望能够并排显示错误div和成功div。我不能使用float的原因是因为当输出错误或成功div时，表单向下移动并且错误显示在表单上方。如果我使用float，那么当显示错误div时表单不再向下移动，我不希望发生这种情况。它们是两个独立的div的原因是因为每个div都有自己的颜色。有关如何执行此操作的建议或将所有错误和成功消息放入一个数组中的方法，但在输出时给它们各自的颜色。

Answer 1

你可以使用float就好了。您只需清除响应消息的浮动即可。

这是关键的成分：

#password_form {
     clear: left;
}

float 的完整示例。移除#error DIV或#success DIV，一切都将保留。

＆＃13;

#success, #errors {
    float: left;
    width: 50%;
}
#success {
    background-color: #f0f0f0;
}
#errors {
    background-color: #b81d18;
    }
#password_form {
    clear: left;
}

＆＃13;

<!-- comment out or remove one of the DIVs below to test -->
<div id="success">Success</div>
<div id="errors">Error</div>

<form id="password_form" action="" method="post">
    Username: </br>
    <input type="text" name="login_username" value=""> 
    </br>
    Password:</br> 
    <input type="password" name="login_password">
    </br>
    <input type="submit" name="login" value="Log in">  
</form>

＆＃13;

Answer 2

尝试在div上使用display: inline-block。像这样：

#success
{
    display: inline-block;
    color: #f0f0f0;
    position: relative;
    top: 3%;
    left: 50%;

    padding: 0;
    margin: 0;  
}
#errors {
    display: inline-block;
    color: #b81d18;
    position: relative;
    top: 3%;
    left: 15%;

    padding: 0;
    margin: 0;
}

将两个元素放在一起而不使用浮动

2 个答案: