[英]how do I move the error messages to the right of the text boxes while keeping the text box centered?
我正在為要構建的新站點創建一個表單，但是在保持文本框居中在屏幕上的同時，無法弄清楚如何在文本框右側顯示錯誤消息。 到目前為止，我只能使它們顯示在文本框上方，但我希望它們顯示在它們旁邊。 您能提供的任何幫助將不勝感激。
這是我的代碼...
<!DOCTYPE html> <html> <head> <title>Register</title> <style> body { background-color: silver; } .welcome { text-align: center; font-family: "Arial"; font-size: 30px; text-shadow: 2px 2px lightgrey; color: white; padding-top: 15px; } .form-group { display: flex; flex-direction: column; align-items: center; text-align: center; } input[name=username], input[name=first_name], input[name=last_name], input[name=email], input[name=password], input[name=confirm_password] { border: 3px solid lightgrey; padding: 10px; background: white; margin: 0 0 10px 0; width: 250px; outline:0 !important; } .help-block { font-family: "Arial"; font-size: 12pt; color: white; padding-bottom: 10px; } input[type=submit] { color: grey; border: 3px solid lightgrey; padding: 5px; width: 100px; text-align: center; } input[type=submit]:focus { outline:0 !important; } input[type=submit]:hover { background-color: #ddd; } input[type=submit]:active { background-color: #aaa; color: lightgrey; } </style> </head> <div class="welcome"> <h1>Register</h1> </div> <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post"> <div class="form-group <?php echo (!empty($username_err)) ? 'has-error' : ''; ?>"> <span class="help-block"><?php echo $username_err; ?></span> <input type="text" name="username" class="form-control" value="<?php echo $username; ?>" placeholder="Username"> </div> <div class="form-group <?php echo (!empty($first_name_err)) ? 'has-error' : ''; ?>"> <span class="help-block"><?php echo $first_name_err; ?></span> <input type="text" name="first_name" class="form-control" value="<?php echo $first_name; ?>" placeholder="First Name"> </div> <div class="form-group <?php echo (!empty($last_name_err)) ? 'has-error' : ''; ?>"> <span class="help-block"><?php echo $last_name_err; ?></span> <input type="text" name="last_name" class="form-control" value="<?php echo $last_name; ?>" placeholder="Last Name"> </div> <div class="form-group <?php echo (!empty($email_err)) ? 'has-error' : ''; ?>"> <span class="help-block"><?php echo $email_err; ?></span> <input type="text" name="email" class="form-control" value="<?php echo $email; ?>" placeholder="Email"> </div> <div class="form-group <?php echo (!empty($password_err)) ? 'has-error' : ''; ?>"> <span class="help-block"><?php echo $password_err; ?></span> <input type="password" name="password" class="form-control" value="<?php echo $password; ?>" placeholder="Password"> </div> <div class="form-group <?php echo (!empty($confirm_password_err)) ? 'has-error' : ''; ?>"> <span class="help-block"><?php echo $confirm_password_err; ?></span> <input type="password" name="confirm_password" class="form-control" value="<?php echo $confirm_password; ?>" placeholder="Confirm Password"> </div> <div class="form-group"> <input type="submit" class="btn btn-primary" value="Submit"> </div> </form> </html>
試試這個解決方案
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
<style>
body {
background-color: silver;
}
.welcome {
text-align: center;
font-family: "Arial";
font-size: 30px;
text-shadow: 2px 2px lightgrey;
color: white;
padding-top: 15px;
}
form{ /* added this */
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.form-group {
display: flex;
flex-direction: row; /* change flex-direction to row */
align-items: center;
text-align: center;
}
input[name=username], input[name=first_name], input[name=last_name], input[name=email],
input[name=password], input[name=confirm_password] {
border: 3px solid lightgrey;
padding: 10px;
background: white;
margin: 0 0 10px 0;
width: 250px;
outline:0 !important;
}
.help-block {
font-family: "Arial";
font-size: 12pt;
color: white;
padding-bottom: 10px;
}
input[type=submit] {
color: grey;
border: 3px solid lightgrey;
padding: 5px;
width: 100px;
text-align: center;
}
input[type=submit]:focus {
outline:0 !important;
}
input[type=submit]:hover {
background-color: #ddd;
}
input[type=submit]:active {
background-color: #aaa;
color: lightgrey;
}
</style>
</head>
<div class="welcome">
<h1>Register</h1>
</div>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="form-group <?php echo (!empty($username_err)) ? 'has-error' : ''; ?>">
<span class="help-block"><?php echo $username_err; ?></span>
<input type="text" name="username" class="form-control" value="<?php echo $username; ?>" placeholder="Username">
</div>
<div class="form-group <?php echo (!empty($first_name_err)) ? 'has-error' : ''; ?>">
<span class="help-block"><?php echo $first_name_err; ?></span>
<input type="text" name="first_name" class="form-control" value="<?php echo $first_name; ?>" placeholder="First Name">
</div>
<div class="form-group <?php echo (!empty($last_name_err)) ? 'has-error' : ''; ?>">
<span class="help-block"><?php echo $last_name_err; ?></span>
<input type="text" name="last_name" class="form-control" value="<?php echo $last_name; ?>" placeholder="Last Name">
</div>
<div class="form-group <?php echo (!empty($email_err)) ? 'has-error' : ''; ?>">
<input type="text" name="email" class="form-control" value="<?php echo $email; ?>" placeholder="Email">
<span class="help-block">Error Message</span>
</div>
<div class="form-group <?php echo (!empty($email_err)) ? 'has-error' : ''; ?>">
<input type="text" name="email" class="form-control" value="<?php echo $email; ?>" placeholder="Email">
<span class="help-block">Error Message</span>
</div>
<div class="form-group <?php echo (!empty($password_err)) ? 'has-error' : ''; ?>">
<span class="help-block"><?php echo $password_err; ?></span>
<input type="password" name="password" class="form-control" value="<?php echo $password; ?>" placeholder="Password">
</div>
<div class="form-group <?php echo (!empty($confirm_password_err)) ? 'has-error' : ''; ?>">
<span class="help-block"><?php echo $confirm_password_err; ?></span>
<input type="password" name="confirm_password" class="form-control" value="<?php echo $confirm_password; ?>" placeholder="Confirm Password">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</form>
</html>
在Bootstrap中折疊后，如何在保持居中狀態的同時向右拉圖像？
[英]How do I pull my image right while keeping it centered once collapsed in Bootstrap?
如何在保持文本居中的同時降低頁腳的高度
[英]how to decrease the height of the footer while keeping the text inside centered
如何在保持文本垂直居中的同時使div的大小與另一個div相同？
[英]How can I make a div grow the same size as another div, while keeping it's text vertically centered?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.