html - 如何让标签文本位于输入字段的左侧？

Question

我无法理解如何从输入字段顶部到左侧获取标签。标签文本位于输入字段的顶部。如何将它放在联系信息部分输入字段的左侧？任何帮助，将不胜感激。非常感谢。

这是我的代码:

#p1 {
  text-align: center;
  background-color: black;
  color: white;
  padding: 20px;
}

#h31 {
  text-align: center;
}

#p2 {
  text-align: center;
}

input[type="text"] {
  border: 2px solid grey;
  border-radius: 4px;
  padding: 6px;
  width: 90%;
  background-color: #d3d3d3;
  display: block;
  margin: 8px 0;
}

input[type="text"]:focus {
  border: 2px solid blue;
}

input[type="email"]:focus {
  border: 2px solid blue;
}

 ::placeholder {
  text-align: right;
}

input[type="submit"] {
  background-color: #3cbc8d;
  color: white;
  border-radius: 4px;
  padding: 16px 32px;
  width: 100%;
}

input[type="email"] {
  border: 2px solid grey;
  padding: 6px;
  width: 90%;
  background-color: #d3d3d3;
  display: block;
  margin: 8px 0;
}

#p3 {
  text-align: center;
}

#submitdiv {
  text-align: center;
}

#textareadiv {
  text-align: center;
}

textarea {
  width: 100%;
}

hr {
  width: 100%;
}

select {
  background-color: #d3d3d3;
  padding: 6px;
  width: 90%;
  display: block;
  margin: 8px 0;
}

input[id="zipcode"] {
  width: 40%;
}

body {
  font-family: 'Merriweather', serif;
}

fieldset {
  border: none;
}

@media screen and (min-width: 768px) {
  .formcenter {
    text-align: center;
    display: block;
  }
  form {
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
  }
  select {
    width: 90%;
    padding: 6px;
    border-radius: 4px;
  }
  #p1 {
    width: 100%;
  }
  hr {
    width: 100%;
  }
}

<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">

<p id="p1">THE CODE REVIEW</p><br><br>
<div class="formcenter">
  <form method="post" action="project3.html">
    <h3 id="h31">Sign up for our newsletter</h3>
    <p id="p2">Get the latest news on how your code is doing right in your inbox</p>
    <hr>
    <hr>
    <fieldset>
      <legend>
        <h3 id="h32">Contact Information</h3>
      </legend>
      <label for="inputfield">Full Name</label>
      <input type="text" name="fullname" placeholder="Required" id="inputfield">
      <label for="inputfield1">Email Address</label>
      <input type="email" name="emailaddress" placeholder="Required" id="inputfield1">
      <label for="inputfield2">Phone Number</label>
      <input type="text" name="phonenumber" id="inputfield2">
      <label for="inputfield3">Street Address</label>
      <input type="text" name="streetaddress" id="inputfield3">
      <label for="inputfield4">City</label>
      <input type="text" name="city" id="inputfield4">
      <label for="stateselect">State</label>
      <select name="state" id="stateselect">
    <option>Choose State</option>
    <option value="mah">Maharashtra</option>
    <option value="guj">Gujarat</option>
    <option value="pun">Punjab</option>
    </select>
      <label for="zipcode">Zip Code</label>
      <input type="text" name="zipcode" id="zipcode">
    </fieldset>
    <hr>
    <fieldset>
      <legend>
        <h3>Newsletter</h3>
      </legend><br>
      <label>Select the newsletters you would like to receive</label><br><br>
      <input type="checkbox" name="htmlnews"><label>HTML News</label><br><br>
      <input type="checkbox" name="css"><label>CSS News</label><br><br>
      <input type="checkbox" name="javascript"><label>Javascript News</label><br><br>
      <label>Newsletter format</label><br><br>
      <input type="radio" name="newsletter" value="html"><label>HTML</label><br><br>
      <input type="radio" name="newsletter" value="plaintext"><label>Plain Text</label><br><br>
      <label>Other topics you'd like to hear about</label><br><br>
      <div id="textareadiv">
        <textarea rows="5" cols="30"></textarea><br><br>
      </div>
      <div id="submitdiv">
        <input type="submit" value="Sign Up"><br><br>
      </div>
    </fieldset>
    <p id="p3"><i>Copyright The Code Review</i></p>
  </form>
</div>

Answer 1

您可以在 inputs 上重置宽度和 display 和/或使用 float。

它可以随时重置，也可以在 mediaquerie 内重置。

您还可以过滤您需要此重置在哪个字段集中生效。(示例如下)

  .formcenter  fieldset:first-of-type label,
  .formcenter  fieldset:first-of-type input{
    float: left;
    line-height: 1.2em;
    padding: 6px;
    margin: 8px 0;
    width: 50%;
  }
  .formcenter fieldset:first-of-type label {
    clear: left;
    width: 35%;
  }
  input[type="checkbox"],
  input[type="radio"]{
    margin-right:1em;
  }
  fieldset ~ fieldset br + label {
    margin:1em;
    color:gray
  }

#p1 {
  text-align: center;
  background-color: black;
  color: white;
  padding: 20px;
}

#h31 {
  text-align: center;
}

#p2 {
  text-align: center;
}

input[type="text"] {
  border: 2px solid grey;
  border-radius: 4px;
  padding: 6px;
  width: 90%;
  background-color: #d3d3d3;
  display: block;
  margin: 8px 0;
}

input[type="text"]:focus {
  border: 2px solid blue;
}

input[type="email"]:focus {
  border: 2px solid blue;
}

 ::placeholder {
  text-align: right;
}

input[type="submit"] {
  background-color: #3cbc8d;
  color: white;
  border-radius: 4px;
  padding: 16px 32px;
  width: 100%;
}

input[type="email"] {
  border: 2px solid grey;
  padding: 6px;
  width: 90%;
  background-color: #d3d3d3;
  display: block;
  margin: 8px 0;
}

#p3 {
  text-align: center;
}

#submitdiv {
  text-align: center;
}

#textareadiv {
  text-align: center;
}

textarea {
  width: 100%;
}

hr {
  width: 100%;
}

select {
  background-color: #d3d3d3;
  padding: 6px;
  width: 90%;
  display: block;
  margin: 8px 0;
}

input[id="zipcode"] {
  width: 40%;
}

body {
  font-family: 'Merriweather', serif;
}

fieldset {
  border: none;
}

@media screen and (min-width: 768px) {
  .formcenter {
    text-align: center;
    display: block;
  }
  form {
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
  }
  select {
    width: 90%;
    padding: 6px;
    border-radius: 4px;
  }
  #p1 {
    width: 100%;
  }
  hr {
    width: 100%;
  }
  .formcenter  fieldset:first-of-type label,
  .formcenter  fieldset:first-of-type input{
    float: left;
    line-height: 1.2em;
    padding: 6px;
    margin: 8px 0;
    width: 50%;
  }
  .formcenter fieldset:first-of-type label {
    clear: left;
    width: 35%;
  }
  input[type="checkbox"],
  input[type="radio"]{
    margin-right:1em;
  }
  fieldset ~ fieldset br + label {
    margin:1em;
    color:gray
  }
}

<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">

<p id="p1">THE CODE REVIEW</p><br><br>
<div class="formcenter">
  <form method="post" action="project3.html">
    <h3 id="h31">Sign up for our newsletter</h3>
    <p id="p2">Get the latest news on how your code is doing right in your inbox</p>
    <hr>
    <hr>
    <fieldset>
      <legend>
        <h3 id="h32">Contact Information</h3>
      </legend>
      <label for="inputfield">Full Name</label>
      <input type="text" name="fullname" placeholder="Required" id="inputfield">
      <label for="inputfield1">Email Address</label>
      <input type="email" name="emailaddress" placeholder="Required" id="inputfield1">
      <label for="inputfield2">Phone Number</label>
      <input type="text" name="phonenumber" id="inputfield2">
      <label for="inputfield3">Street Address</label>
      <input type="text" name="streetaddress" id="inputfield3">
      <label for="inputfield4">City</label>
      <input type="text" name="city" id="inputfield4">
      <label for="stateselect">State</label>
      <select name="state" id="stateselect">
    <option>Choose State</option>
    <option value="mah">Maharashtra</option>
    <option value="guj">Gujarat</option>
    <option value="pun">Punjab</option>
    </select>
      <label for="zipcode">Zip Code</label>
      <input type="text" name="zipcode" id="zipcode">
    </fieldset>
    <hr>
    <fieldset>
      <legend>
        <h3>Newsletter</h3>
      </legend><br>
      <label>Select the newsletters you would like to receive</label><br><br>
      <input type="checkbox" name="htmlnews"><label>HTML News</label><br><br>
      <input type="checkbox" name="css"><label>CSS News</label><br><br>
      <input type="checkbox" name="javascript"><label>Javascript News</label><br><br>
      <label>Newsletter format</label><br><br>
      <input type="radio" name="newsletter" value="html"><label>HTML</label><br><br>
      <input type="radio" name="newsletter" value="plaintext"><label>Plain Text</label><br><br>
      <label>Other topics you'd like to hear about</label><br><br>
      <div id="textareadiv">
        <textarea rows="5" cols="30"></textarea><br><br>
      </div>
      <div id="submitdiv">
        <input type="submit" value="Sign Up"><br><br>
      </div>
    </fieldset>
    <p id="p3"><i>Copyright The Code Review</i></p>
  </form>
</div>