左对齐系列文本框和段落

时间：2016-10-18 08:40:42

标签： html css

我创建了一个表单，我希望表单的内容都是左对齐的。当我使用float：left时，表单中的输入和段落最终相互叠加。所以我试图找出如何正确实现这一点，以便它们整齐地堆叠在一起。

标题处于完美位置。我只想让表格左对齐。

＆＃13;
＆＃13; 
* {
  box-sizing: border-box;
}
body {
  background-color: black;
  margin-left: 20%;
  margin-right: 20%;
  margin-top: 3%;
}
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;
}

form {
  float: left;
}
textarea {
  float: left;
  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 {
  float: left;
  font-family: Gilroy;
  font-size: 25px;
  padding-left: 5px;
  height: 50px;
  width: 500px;
}
p{
  color: white;
  float: left;
  font-family: Gilroy-Bold;
  font-size: 30px;
}
＆＃13; 
<DOCTYPE! html>
  <html>
  <head>
    <title>1520 Sedgwick Avenue - Sign The Petition</title>
    <link href="css/form.css" rel="stylesheet"/>
    <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 action="petition.php" method="POST">
        <p>FIRST NAME</p>
        <div id="first-name-group" class="form-group">
          <label for="first-name">First Name</label>
          <input type="text" class="form-control" name="first-name" placeholder="John">
        </div>
        <p>LAST NAME</p>
        <div id="last-name-group" class="form-group">
          <label for="last-name">Last Name</label>
          <input type="text" class="form-control" name="last-name" placeholder="Smith">
        </div>
        <p>EMAIL</p>
        <div id="email-group" class="form-group">
          <label for="email">Email</label>
          <input type="text" class="form-control" name="email" placeholder="jsmith@gmail.com">
        </div>
        <p>COUNTRY</p>
        <div id="country-group" class="form-group">
          <label for="country">Country</label>
          <input type="text" class="form-control" name="country" placeholder="United States">
        </div>
        <p>STREET ADDRESS</p>
        <div id="street-address-group" class="form-group">
          <label for="street-address">Street Address</label>
          <input type="text" class="form-control" name="street-address" placeholder="123 Brick Lane">
        </div>
        <p>ZIP CODE</p>
        <div id="zip-code-group" class="form-group">
          <label for="zip-code">Zip Code</label>
          <input type="text" class="form-control" name="zip-code" placeholder="12345">
        </div>
        <p>COMMENT (OPTIONAL)</p>
        <div id="comment-group" class="form-group">
          <label for="comment">Comment</label>
          <textarea rows "4" cols = "50" type="text" class="form-control" name="comment" placeholder="I'm signing because..."></textarea>
        </div>
        <button type="submit" class="btn btn-success">SUBMIT</button>
      </form>
    </div>
  </body>
  </html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

已清除form-group课程。因为您将输入浮动到左侧。它的包装器form-group必须清除自己，以便下一个div可以在它之后。

我还将段落标记设为100％宽度。

另请注意，for引用代码中name标记中的<input>属性。它应该引用id属性。 [提及 - Roy_Dorsthorst]

＆＃13;
＆＃13; 
* {
  box-sizing: border-box;
}
body {
  background-color: black;
  margin-left: 20%;
  margin-right: 20%;
  margin-top: 3%;
}
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;
}
.form-group:after {
   visibility: hidden;
   display: block;
   font-size: 0;
   content: " ";
   clear: both;
   height: 0;
}
button:hover {
  background-color: lightgray;
}

form {
  float: left;
}
textarea {
  float: left;
  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 {
  float: left;
  font-family: Gilroy;
  font-size: 25px;
  padding-left: 5px;
  height: 50px;
  width: 500px;
}
p{
  color: white;
  float: left;
  font-family: Gilroy-Bold;
  font-size: 30px;
  width: 100%;
}
＆＃13; 
<DOCTYPE! html>
  <html>
  <head>
    <title>1520 Sedgwick Avenue - Sign The Petition</title>
    <link href="css/form.css" rel="stylesheet"/>
    <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 action="petition.php" method="POST">
        <p>FIRST NAME</p>
        <div id="first-name-group" class="form-group">
          <label for="first-name">First Name</label>
          <input type="text" class="form-control" id="first-name" name="first-name" placeholder="John">
        </div>
        <p>LAST NAME</p>
        <div id="last-name-group" class="form-group">
          <label for="last-name">Last Name</label>
          <input type="text" class="form-control" id="last-name" name="last-name" placeholder="Smith">
        </div>
        <p>EMAIL</p>
        <div id="email-group" class="form-group">
          <label for="email">Email</label>
          <input type="text" class="form-control" id="email"  name="email" placeholder="jsmith@gmail.com">
        </div>
        <p>COUNTRY</p>
        <div id="country-group" class="form-group">
          <label for="country">Country</label>
          <input type="text" class="form-control" id="country"  name="country" placeholder="United States">
        </div>
        <p>STREET ADDRESS</p>
        <div id="street-address-group" class="form-group">
          <label for="street-address">Street Address</label>
          <input type="text" class="form-control" id="street-address"   name="street-address" placeholder="123 Brick Lane">
        </div>
        <p>ZIP CODE</p>
        <div id="zip-code-group" class="form-group">
          <label for="zip-code">Zip Code</label>
          <input type="text" class="form-control" id="zip-code"  name="zip-code" placeholder="12345">
        </div>
        <p>COMMENT (OPTIONAL)</p>
        <div id="comment-group" class="form-group">
          <label for="comment">Comment</label>
          <textarea rows "4" cols = "50" type="text" class="form-control"  id="comment" name="comment" placeholder="I'm signing because..."></textarea>
        </div>
        <button type="submit" class="btn btn-success">SUBMIT</button>
      </form>
    </div>
  </body>
  </html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题