Question

我正在尝试将表单保持在屏幕中心，但是当我添加额外的文本（如错误消息）时，整个输入框也会转移到错误文本的中心位置。我只希望表单文本框居中，然后将所有内容添加到右侧。

示例代码：

<div style="width:60%; text-align: center; background-color: #70b08e; margin: 0 auto;">
        <span class="error">*Required feild</span>
        <br><br>
        <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
        <label for="name">User name:</label><input type="text" name="name" value="<?php echo $name;?>" maxlength=255>
        <span class="error">*<?php echo $nameErr;?></span>
        <br><br>
        <label for="email">E-Mail:</label><input type="text" name="email" value="<?php echo $email;?>" maxlength=255>
        <span class="error">*<?php echo $emailErr;?></span>
        <br><br>
        <label for="password">Password:</label><input type="password" name="password">
        <span class="error">*<?php echo $passwordErr;?></span>
        <br><br>
        <label for="gender">Gender:</label>
        <input type="radio" name="gender" <?php if (isset($gender) && $gender=="female") echo "checked";?>  value="female">Female
        <input type="radio" name="gender" <?php if (isset($gender) && $gender=="male") echo "checked";?>  value="male">Male
        <span class="error">* <?php echo $genderErr;?></span>
        <br><br>
        <input type="submit" name="submit" value="Submit"> 
        </form>
    </div>

感谢任何帮助。

Answer 1

在此处text-align: right;更改<div style="width:60%; text-align: right; background-color: #70b08e; margin: 0 auto;">：

<div class="error" style="text-align: center;">*Required feild</div>

还有：

Fatal error: Cannot use object of type DOMNodeList as array in /www/data/showData.php on line 69

default constructor arguments

Answer 2

我认为这就是你想要的。

＆＃13;

.input-grp {
  position: relative;
  margin: 0px;
  padding: 0px;
}

.error {
  position: absolute;
}

＆＃13;

<div style="width:60%; text-align: center; background-color: #70b08e; margin: 0 auto;">
  <span class="global-error">*Required feild</span>
  <br>
  <br>
  <form method="post">
    <div class="input-grp">
      <label for="name">User name:</label>
      <input type="text" name="name" value="" maxlength=255>
      <span class="error">error message</span>
    </div>
    <br>
    <br>
    <div class="input-grp">
      <label for="email">E-Mail:</label>
      <input type="text" name="email" value="" maxlength=255>
      <span class="error">email error</span>
    </div>
    <br>
    <br>
    <div class="input-grp">

      <label for="password">Password:</label>
      <input type="password" name="password">
      <span class="error">pass error</span>
    </div>
    <br>
    <br>
    <div class="input-grp">
      <label for="gender">Gender:</label>
      <input type="radio" name="gender" value="female">Female
      <input type="radio" name="gender" value="male">Male
      <span class="error"></span>
    </div>
    <br>
    <br>
    <input type="submit" name="submit" value="Submit">
  </form>
</div>

＆＃13;

保持形式中心但不变

2 个答案: