Question

我正在处理我正在构建的网站的注册表单，但不能将回显的错误消息与表单中的文本框分开。每次我在浏览器中运行它来测试错误消息时，文本框都会向左移动（不对齐），错误消息显示在它们的右侧。显然，它对齐了中心的两个对象，但我只希望表单字段居中。感谢您提供的任何帮助。

这是我的html和css代码......

＆＃13;

<!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 {
    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;
  }
  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' : ''; ?>">
    <input type="text" name="username" class="form-control" value="<?php echo $username; ?>" placeholder="Username">
    <span class="help-block"><?php echo $username_err; ?></span>
  </div>
  <div class="form-group <?php echo (!empty($first_name_err)) ? 'has-error' : ''; ?>">
    <input type="text" name="first_name" class="form-control" value="<?php echo $first_name; ?>" placeholder="First Name">
    <span class="help-block"><?php echo $first_name_err; ?></span>
  </div>
  <div class="form-group <?php echo (!empty($last_name_err)) ? 'has-error' : ''; ?>">
    <input type="text" name="last_name" class="form-control" value="<?php echo $last_name; ?>" placeholder="Last Name">
    <span class="help-block"><?php echo $last_name_err; ?></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"><?php echo $email_err; ?></span>
  </div>
  <div class="form-group <?php echo (!empty($password_err)) ? 'has-error' : ''; ?>">
    <input type="password" name="password" class="form-control" value="<?php echo $password; ?>" placeholder="Password">
    <span class="help-block"><?php echo $password_err; ?></span>
  </div>
  <div class="form-group <?php echo (!empty($confirm_password_err)) ? 'has-error' : ''; ?>">
    <input type="password" name="confirm_password" class="form-control" value="<?php echo $confirm_password; ?>" placeholder="Confirm Password">
    <span class="help-block"><?php echo $confirm_password_err; ?></span>
  </div>
  <div class="form-group">
    <input type="submit" class="btn btn-primary" value="Submit">
  </div>
</form>
</html>

＆＃13;

Answer 1

一种方法是制作form-group＆＃39; display:inline-block和position:relative。之后，您必须将form-group与[{1}} text-align:center放在form上。

现在，您可以简单地将错误消息置于绝对位置并移动它们top:0;和left: 270px（250px输入宽度和2 * 10px填充）

如果您只想在输入框下输入错误消息，diplay:block; text-align:center;上的简单help-block就足够了

如何从注册表单中的表单字段中分离错误消息？

1 个答案: