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

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

可以随时重置mediaquerie。

您还可以过滤fieldset需要此重置才能生效。（以下示例）

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

Answer 2

你可以使用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>

Answer 3

交换label和input以获得所需结果：

#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>
      <label>HTML News</label><input type="checkbox" name="htmlnews"><br><br>
      <label>CSS News</label><input type="checkbox" name="css"><br><br>
      <label>Javascript News</label><input type="checkbox" name="javascript"><br><br>
      <label>Newsletter format</label><br><br>
      <label>HTML</label><input type="radio" name="newsletter" value="html"><br><br>
      <label>Plain Text</label><input type="radio" name="newsletter" value="plaintext"><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 4

你可以很容易地做到这一点：

Full Name: <input type="text" name="fullname" placeholder="Required" id="inputfield">

这只会使文本显示在输入本身的左侧。

我将此方法用于我正在做的简报输入：

Name: <input id="nameInput" type="text" name="name" required><br>

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

4 个答案: