Question

我遇到的问题是试图在我的所有输入下获得红色下划线。现在它只做了一半，即使它们都是输入。它似乎只是给我的第一部分下划线...有人能看出为什么我的第一部分是唯一一个有下划线而我的部分不是吗？谢谢你的帮助！

这是一个jsfiddle看到它： https://jsfiddle.net/acr3jw29/

HTML：

<body>

<h1>Contact</h1>

<form action="" methods="GET" enctype="multipart/form-data" autocomplete="on" class="contact">
<section class="clearfix">
<fieldset><legend><i class="fa fa-user" aria-hidden="true"></i>

个人信息

<label><span>First Name</span> <input name="first_name" type="text" value="" placeholder="First Name Here" autofocus required/>
</label>
<label><span>Last Name</span><input name="last_name" type="text" value="" placeholder="Last Name Here" autofocus required/>
</label>
<label><span>Date of Birth</span> <input name="date_of_birth" type="date" value="" placeholder="Date of Birth" autofocus required/>
</label>


<label><span>Level of Education</span> <input name="level_of_education" type="" value="" placeholder="" autofocus required/></label>
<select name="education_level">
<option value="High School">High School</option>
<option value="Undergraduate">Undergradute</option>
<option value="Graduate">Graduate</option>
</select>





<label><span>Number of years until next degree is completed </span>       
<input type="number" name="quantity" min="1" max="6" autofocus></label>

</fieldset>




<fieldset><legend><i class="fa fa-envelope-o" aria-hidden="true"></i>

联系信息

<label><span>Email</span><input class="ghost-input" name="email" value="" type="email" placeholder="youremail@email.com" autocomplete="off" /></label>

<label><span>Phone Number</span><input name="phonenumber" value="" type="tel" placeholder="743-558-2196" /></label>

<label><span>Website</span><input name="website" value="" type="url" placeholder="https://yoururl.com"/></label>



</fieldset>




</section>




<section class="clearfix column"  >


<fieldset><legend><i class="fa fa-laptop" aria-hidden="true"></i>

你的兴趣是什么

<label><span>Web Design</span><input name="webdesign" value="web_design" type="checkbox"/></label>

<label><span>Web Development</span><input name="webdevelopment" value="web_development" type="checkbox" /></label>

<label><span>Computer Science</span><input name="computerscience" value="computer_science" type="checkbox" /></label>




<label><span>Graphic Design</span><input name="graphicdesign" value="graphic_design" type="checkbox" /></label>

<label><span>User Experience</span><input name="userexperience" value="user_experience" type="checkbox" /></label>

<label><span>App Development</span><input name="appdevelopment" value="app_development" type="checkbox" /></label>


</fieldset>



<fieldset><legend><i class="fa fa-volume-control-phone" aria-hidden="true">

</i>

Continuation</legend>



<legend>You can contact me by:</legend>
<br>
<label><span>Contact me by phone</span><input  name="contact_me" type="radio" value="phone" checked/></label>
<label><span>Contact me by email</span><input  name="contact_me" type="radio" value="email"/></label>
<label><span>Contact me by text</span><input  name="contact_me" type="radio" value="text"/></label>
<br>


<legend>I'm interested in:</legend>
<br>

<label><span>Undergraduate</span><input name="interest" type="radio" value="text"/></label>
<label><span>Graduate</span><input  name="interest" type="radio" value="text"/></label>
<label><span>Online</span><input  name="interest" type="radio" value="text"/></label>

</fieldset>



</section>






</form>
<br>
<input name="submit_to_programmer" type="submit" value="Submit"/>


<script src="https://use.fontawesome.com/8f5d316ef9.js"></script>

</body>

Answer 1

为了在所有浏览器中正确显示，快速解决方法是将复选框和无线电类型的所有输入容器放在范围内。我注意到您为代码中的所有span元素设置了display:block;。所以我为每个span容器插入了一个类，该容器将保持输入框和带有内联块显示的样式。

请参阅下面的代码段

＆＃13;

@charset "utf-8";

/* CSS Document */

form.contact label {
  display: block;
}

span {
  display: block;
  border: none;
}

.clearfix:after {
  content: " ";
  display: block;
  clear: both;
}

section {
  width: 90%;
}

fieldset {
  width: 45%;
  float: left;
  border: none;
}

input {
  border: none;
  border-bottom: 2px solid red;
  margin: 3px;
}
.in_container{
  display:inline-block;
  border-bottom:solid red;
}

＆＃13;

<body>

  <h1>Contact</h1>

  <form action="" methods="GET" enctype="multipart/form-data" autocomplete="on" class="contact">
    <section class="clearfix">
      <fieldset>
        <legend><i class="fa fa-user" aria-hidden="true"></i> Personal Information</legend>

        <label><span>First Name</span>
          <input name="first_name" type="text" value="" placeholder="First Name Here" autofocus required/>
        </label>
        <label><span>Last Name</span>
          <input name="last_name" type="text" value="" placeholder="Last Name Here" autofocus required/>
        </label>
        <label><span>Date of Birth</span>
          <input name="date_of_birth" type="date" value="" placeholder="Date of Birth" autofocus required/>
        </label>


        <label><span>Level of Education</span>
          <input name="level_of_education" type="" value="" placeholder="" autofocus required/>
        </label>
        <select name="education_level">
          <option value="High School">High School</option>
          <option value="Undergraduate">Undergradute</option>
          <option value="Graduate">Graduate</option>
        </select>
        <label><span>Number of years until next degree is completed </span>
          <input type="number" name="quantity" min="1" max="6" autofocus>
        </label>
      </fieldset>
      <fieldset>
        <legend><i class="fa fa-envelope-o" aria-hidden="true"></i> Contact Information</legend>

        <label><span>Email</span>
          <input class="ghost-input" name="email" value="" type="email" placeholder="youremail@email.com" autocomplete="off" />
        </label>

        <label><span>Phone Number</span>
          <input name="phonenumber" value="" type="tel" placeholder="743-558-2196" />
        </label>

        <label><span>Website</span>
          <input name="website" value="" type="url" placeholder="https://yoururl.com" />
        </label>
      </fieldset>
    </section>
    <section class="clearfix column">
      <fieldset>
        <legend><i class="fa fa-laptop" aria-hidden="true"></i> What are your Interests</legend>
        <label><span>Web Design</span>
          <span class="in_container">
            <input name="webdesign" value="web_design" type="checkbox" />
          </span>
        </label>

        <label><span>Web Development</span>
          <span class="in_container">
          <input name="webdevelopment" value="web_development" type="checkbox" />
          </span>
        </label>

        <label><span>Computer Science</span>
          <span class="in_container">
          <input name="computerscience" value="computer_science" type="checkbox" />
          </span>
        </label>
        <label><span>Graphic Design</span>
          <span class="in_container">
          <input name="graphicdesign" value="graphic_design" type="checkbox" />
          </span>
        </label>

        <label><span>User Experience</span>
          <span class="in_container">
          <input name="userexperience" value="user_experience" type="checkbox" />
          </span>
        </label>

        <label><span>App Development</span>
          <span class="in_container">
          <input name="appdevelopment" value="app_development" type="checkbox" />
          </span>
        </label>

      </fieldset>
      <fieldset>
        <legend><i class="fa fa-volume-control-phone" aria-hidden="true">

</i> Continuation
        </legend>
        <legend>You can contact me by:</legend>
        <br>
        <label><span>Contact me by phone</span>
          <span class="in_container">
          <input name="contact_me" type="radio" value="phone" checked/>
          </span>
        </label>
        <label><span>Contact me by email</span>
          <span class="in_container">
          <input name="contact_me" type="radio" value="email" />
          </span>
        </label>
        <label><span>Contact me by text</span>
          <span class="in_container">
          <input name="contact_me" type="radio" value="text" />
          </span>
        </label>
        <br>
        <legend>I'm interested in:</legend>
        <br>

        <label><span>Undergraduate</span>
          <span class="in_container">
          <input name="interest" type="radio" value="text" />
          </span>
        </label>
        <label><span>Graduate</span>
          <span class="in_container">
          <input name="interest" type="radio" value="text" />
          </span>
        </label>
        <label><span>Online</span>
          <span class="in_container">
          <input name="interest" type="radio" value="text" />
          </span>
        </label>
      </fieldset>
    </section>
  </form>
  <br>
  <span class="in_container">
  <input name="submit_to_programmer" type="submit" value="Submit" />
  </span>
  <script src="https://use.fontawesome.com/8f5d316ef9.js"></script>
</body>

</html>

＆＃13;

表格

1 个答案: