Question

我希望我的输入左对齐，所以它们在左侧整齐排列，如下图所示：

出于某种原因，即使我将输入和段落浮动，输入也无法正确对齐。左浮动使输入和段落奇怪地堆叠。我似乎无法弄清楚我做错了什么。

就像现在一样，我设置代码的方式是最接近我想要的实际结果，因为一切都在彼此之上，但我无法得到段落和输入由于某种原因整齐地左对齐。有谁知道我做错了什么？

* {
  box-sizing: border-box;
}
body {
  background-color: black;
  margin-left: 20%;
  margin-right: 20%;
  margin-top: 50px;
  width: 760px;
}
button {
  background-color: white;
  border: none;
  color: black;
  float: left;
  font-family: Gilroy-Bold;
  font-size: 57px;
  height: 110px;
  margin-bottom: 40px;
  margin-top: 40px;
  width: 300px;
}
button:hover {
  background-color: lightgray;
}
textarea {
  font-family: Gilroy;
  font-size: 25px;
  height: 400px;
  padding-left: 10px;
  padding-top: 5px;
  width: 600px;
}
@font-face {
  font-family: Gilroy;
  color: white;
  src: typefaces/gilroy-bold.ttf (gilroy-bold.ttf);
}
form {
  font-family: Gilroy;
  padding-top: 20px;
  padding-bottom: 40px;
}
h1 {
  color: white;
  font-family: Gilroy-Bold;
  font-size: 95px;
  margin-bottom: 0px;
  margin-top: 0px;
  text-align: center;
}
hr {
  border: 0;
  border-bottom: 1px solid white;
  border-top: 12px solid white;
  width: 760px;
}
input {
  font-family: Gilroy;
  font-size: 25px;
  padding-left: 5px;
  height: 50px;
  width: 500px;
}
p{
  color: white;
  font-family: Gilroy-Bold;
  font-size: 30px;
  text-align: left;
}

<DOCTYPE! html>
  <html>
  <head>
    <title>1520 Sedgwick Avenue - Sign The Petition</title>
    <link href="css/form.css" rel="stylesheet"/>
    <link rel='shortcut icon' type='image/x-icon' href='images/favicon.ico' />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="petition.js"></script>
  </head>
  <body>
    <header>
      <hr>
      <h1>SIGN THE PETITION</h1>
      <hr>
    </header>
    <div class="col-sm-6 col-sm-offset-3">
      <form>
        <p>FIRST NAME</p>
        <input type="text" class="form-control" name="first-name" placeholder="John">
        <p>LAST NAME</p>
        <label for="last-name">Last Name</label>
        <input type="text" class="form-control" name="last-name" placeholder="Smith">
        <p>EMAIL</p>
        <label for="email">Email</label>
        <input type="text" class="form-control" name="email" placeholder="jsmith@gmail.com">
        <p>COUNTRY</p>
        <label for="country">Country</label>
        <input type="text" class="form-control" name="country" placeholder="United States">
        <p>STREET ADDRESS</p>
        <label for="street-address">Street Address</label>
        <input type="text" class="form-control" name="street-address" placeholder="123 Brick Lane">
        <p>ZIP CODE</p>
        <label for="zip-code">Zip Code</label>
        <input type="text" class="form-control" name="zip-code" placeholder="12345">
        <p>COMMENT (OPTIONAL)</p>
        <label for="comment">Comment</label>
        <textarea rows "4" cols = "50" type="text" class="form-control" name="comment" placeholder="I'm signing because..."></textarea>
        <button type="submit">SUBMIT</button>
      </form>
    </div>
  </body>
  </html>

Answer 1

有一个填充空间的标签，你无法看到它，因为它的颜色与背景颜色相同

要解决您的问题，您需要删除<p>和<input>之间的所有标签

Answer 2

由于您的标签元素，您输入之前的差距就在那里例如

<label for="last-name">Last Name</label>

您可以删除第一个输入标签

<p>FIRST NAME</p>
<input type="text" class="form-control" name="first-name" placeholder="John">

enter image description here

输入即使浮动也不会左对齐

2 个答案: