css - 如何将这些输入元素放在页面的中心，使下面的 div 完美对齐，并将之前的 span 元素保持在左侧？

Question

我有三个输入，之前有一个跨度，之后有一个 div，最后一个在i之后有一个元素：

<div class="container-fluid">
    <form id="recaptcha_form">
        <fieldset class="form-group">
            <legend class="form_legend">Create Account</legend>
            <div class="form_field">
                <span class="validate_symbol">&#10007;</span>
                <input type="text" class="register_field" id="id_username">
                <div style = "display:none" class="error" aria-live="polite"></div>
            </div>
            <div class="form_field">
                <span class="validate_symbol">&#10007;</span>
                <input type="text" class="register_field"id="id_username">
                <div class="error" aria-live="polite"></div>
            </div>
            <div class="form_field">
                <span class="validate_symbol" >&#10007;</span>
                <input type="text" class="register_field"id="id_username">
                <i id="password_toggle">SHOW</i>
                <div class="error" ></div>
            </div>
        </fieldset>
    </form>
</div>

CSS

input{
  width: 200px;
}

/* Error messages below input */
.error{
  /* Same width as above input */
  width: 200px;
  /* Width of .validate_symbol */
  margin-left: 20px;
  font-size: small;
  color: white;
  background-color: #b30000;
  text-align: center;
}
.validate_symbol{
  color: red;
  font-size: 20px;
  margin-right: none;
}
/* SHOW/HIDE password element */
#password_toggle{
    margin-left: -45px;
    cursor: pointer;
    font-size: 10px;
}

结果是：

我还添加了 CSS：

body{
  text-align: center;
}
form {
    display: inline-block;
}

结果是：

.error div 仍未与上述输入完全对齐，并添加了“显示”文本导致密码字段未对齐。

我想将输入元素居中，同时将 .validate_symbol 元素保留在所有屏幕尺寸之前，并将 .error div 与上述输入元素完美对齐。

标签： css

Answer 1

我重新创建了您的代码（简化了类名），结果如下：

这是我的代码，希望对您有所帮助！‍</p>

HTML：

<div class="container">
    <form action="#">
        <fieldset>
            <legend>Create Account</legend>
            <div class="wrapper">
                <input type="text">
                <div class="error">I am an error.</div>
            </div>
            <div class="wrapper">
                <input type="text">
                <div class="error">I am an error.</div>
            </div>
            <div class="wrapper">
                <input type="text">
                <div class="error">I am an error.</div>
            </div>
        </fieldset>
    </form>
</div>

CSS：

*,
*:before,
*:after {
  box-sizing: border-box;
}

.container {
  width: 300px;
}

.container form fieldset {
  appearance: none;
  width: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: row;
  gap: 1rem;
  border: none;
}

.container form fieldset legend {
  appearance: none;
  width: 100%;
  margin: 0;
  padding: 1rem 1rem 1rem 2rem;
  position: relative;
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
}

.container form fieldset .wrapper {
  width: 100%;
  padding: 0 0 0 2rem;
  position: relative;
  display: grid;
  grid-auto-flow: row;
}

.container form fieldset .wrapper input {
  appearance: none;
  width: 100%;
  margin: 0;
  padding: 1rem;
  position: relative;
  border: none;
}

.container form fieldset .wrapper .error {
  width: 100%;
  padding: 0.5rem;
  background-color: red;
}

.container form fieldset .wrapper:before {
  content: "X";
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  font-weight: 900;
  color: red;
}