<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 都有自己的颜色。有关如何执行此操作的任何建议或将所有错误和成功消息放入一个数组但在输出时赋予它们各自的颜色的方法。
你可以
很好地使用float。您只需要清除响应消息的浮动即可。
这是关键因素：
#password_form {
clear: left;
}
带有浮点数的完整示例。移除#error DIV 或 #success DIV，一切都将保持不变。
#success, #errors {
float: left;
width: 50%;
}
#success {
background-color: #f0f0f0;
}
#errors {
background-color: #b81d18;
}
#password_form {
clear: left;
}<!-- 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>尝试在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;
}