html - 如何获取标签文本在输入字段的左侧？

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

这是我的代码：

#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>

最佳答案

您可以将display：flex与每个行的容器一起使用

.line
{
  display:flex;
  align-items:center;
}

.line label
{
  min-width:200px;
}


input
{
  flex:1;
  margin:10px;
}


#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>

      <div class="line">
        <label for="inputfield">Full Name :</label>
        <input type="text" name="fullname" placeholder="Required" id="inputfield">
      </div>

      <div class="line">
        <label for="inputfield1">Email Address :</label>
        <input type="email" name="emailaddress" placeholder="Required" id="inputfield1">
      </div>

      <div class="line">
        <label for="inputfield2">Phone Number :</label>
        <input type="text" name="phonenumber" id="inputfield2">
      </div>

      <div class="line">
        <label for="inputfield3">Street Address :</label>
        <input type="text" name="streetaddress" id="inputfield3">
      </div>

      <div class="line">
        <label for="inputfield4">City :</label>
        <input type="text" name="city" id="inputfield4">
      </div>

      <div class="line">
          <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>
    </div>
    <div class="line">
      <label for="zipcode">Zip Code :</label>
      <input type="text" name="zipcode" id="zipcode">
    </div>
    </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>