标签未在文本输入上方的左上角对齐答案

【问题标题】：Labels not aligned on top left side above text inputs标签未在文本输入上方的左上角对齐
【发布时间】：2021-12-26 10:08:20
【问题描述】：

我一直试图让标签位于文本输入上方的左侧，但我所做的只是将其移向中心。我究竟做错了什么？抱歉，如果我标记事物的方式看起来很奇怪，我对 HTML 和 CSS 还是很陌生。

The output that I want

The output I'm getting

HTML

<div class="account-form">
      <form action="/account-sign-up">
        <div>
          <label for="first">First Name</label>
          <input
            id="first"
            type="text"
            placeholder="e.g. Wan"
            name="first"
            required
          />
        </div>

        <div>
          <label for="last">Last Name</label>
          <input
            id="last"
            type="text"
            placeholder="e.g. Aiman"
            name="last"
            required
          />
        </div>

        <div>
          <label for="email">Email</label>
          <input
            id="email"
            type="email"
            placeholder="e.g. wanaiman@gmail.com"
            name="email"
            required
          />
        </div>

        <div>
          <label for="password">Password</label>
          <input
            id="password"
            type="password"
            placeholder="Must be 9-20 characters"
            name="password"
            minlength="9"
            maxlength="20"
            required
          />
        </div>

        <input type="submit" value="Sign in" />

        <div id="account-extra">
          Already have an account?
          <a href="sign-in.html" id="account-link">Sign In</a>
        </div>
      </form>
    </div>

CSS

.account-form {
  margin-top: 55px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

label {
  color: white;
  display: block;
  margin-top: 30px;
  font-family: "Epilogue", sans-serif;
  font-weight: 600;
  font-size: 20px;
}

input {
  display: block;
  width: 550px;
  margin: 0 auto;
  background-color: #f0f3ff;
  color: #666666;
  padding: 15px;
  border-radius: 10px;
  border: 2px solid transparent;
  outline: none;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.5s;
}

input:hover {
  background-color: white;
}

input:focus {
  cursor: text;
  color: #303030;
  background-color: white;
  border-color: #303030;
}

input[type="submit"] {
  display: block;
  color: white;
  background-color: black;
  font-family: "Epilogue", sans-serif;
  font-size: 15px;
  font-weight: 600;
  margin-top: 40px;
}

input[type="submit"]:hover {
  color: black;
  background-color: #f0f3ff;
}

#account-extra {
  font-family: "Epilogue", sans-serif;
  color: white;
  margin-top: 30px;
}

#account-extra a {
  color: white;
  text-decoration: none;
  font-weight: 900;
}

【问题讨论】：

在标签 css 中添加 text-align:left
尝试在.account-form{text-align: left; margin: auto; width: 550px;}中添加这些属性
@ShashankGb 这对我有用，谢谢！尽管我无法接受您的回答，因为它是评论。您介意再次发布它作为答案，以便我接受吗？

标签： html css forms

【解决方案1】：

使父 div 宽度与您的 <input> 宽度相同，以便您可以使用 margin:auto 使 div 居中。最后你可以使用text-align: left，如下所示

.account-form{
  text-align: left; 
  margin: auto; 
  width: 550px;
}

注意：默认情况下它采用text-align: left。我刚才提到是因为你使用了text-align: center

【讨论】：

【解决方案2】：

你可以为标签添加这段代码

label {
  color: black;
  text-align:left;
  display: block;
  margin-top: 30px;
  font-family: "Epilogue", sans-serif;
  font-weight: 600;
  font-size: 20px;
}

【讨论】：