html - 下划线问题与形式-6ren

html - 下划线问题与形式

转载作者：行者123 更新时间：2023-11-28 05:01:35

我遇到的问题是试图在我的所有输入下显示红色下划线。现在它只做了一半，即使它们都是输入。看来它只是给我的第一部分下划线...有人能看出为什么我的第一部分是唯一带下划线的部分而我的部分不是吗？感谢您的帮助!

这里有一个 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>

最佳答案

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

看下面的片段

@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;
}

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

关于html - 下划线问题与形式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40073856/

文章推荐： c++ - 将类函数传递给另一个类函数

文章推荐： javascript - 为什么我的 jQuery 切换不起作用？

文章推荐： c# - 无法将结构的 Marshal 指针转换回结构

文章推荐： css - Foundation 6 CSS 不工作

MySQL语法错误，下划线
执行此查询 INSERT INTO classes( '_fkUserID', 'date', 'time' ) VALUES ( '1', '2017-07-04', '8:15' ) 给
Java - 下划线
不知道它是否重复(无法找到要搜索的词，例如 “允许使用 java 字符”)。我在测试面试中遇到了这个问题: 考虑以下类: class _ {_ f; _(){}_(_ f){_ t = f; f =
java - 检查屏幕名称是否只有一个连字符/下划线
我需要验证用户的屏幕名称以确保它不能有多个连字符或下划线我不希望人们的网名全是标点符号。这是我到目前为止的验证: public boolean validateScreenName(String
angularjs - 下划线，检查对象数组中是否存在键
我正在尝试检查我收到的新数据是否针对我持有的对象，我想知道的是，我正在发送的对象的键是否与我当前拥有的对象中的任何键匹配。所以我捕获了一个像 myObj = [{"one": 1}, {"two":
javascript - 下划线 - 基于值定位节点
这是我第一次使用下划线...我有这个简单的 json... "categories" : [ { "tag" : "cat1", "active" : true
wpf - 在WPF内容中看不到_(下划线)
一个很简单的问题: 为什么在WPF内容中看不到_(下划线)？例如内容显示为"testt"(未显示下划线)。最佳答案标签支持助记符(即您可以使用ctrl +(key)赋予它们焦点)。您可以使用
javascript - 下划线 - 在数组中搜索匹配的路径
下面是我正在处理的简化逻辑，我想在数组中查找具有匹配位置(文件夹)的文件。我能够使用普通的 JS 循环来实现此功能，您能建议更好/更简单/类似下划线的方法来实现此类功能吗？ // source va
javascript - 下划线，查找和更改对象中的值
我正在尝试在对象的函数中查找和替换值我的对象看起来像这样: var testStates = [{ "module": "module1", "customUrl": [
javascript - 从对象数组中删除重复项 - 下划线
尝试让 _.uniq() 在以下结构上工作: [ {'x' : 1, 'y': 2}, {'x' : 1, 'y': 2}, {'x' : 2, 'y': 3}, {'
javascript - 获取最近日期，下划线
明白了: [{ "title": "qq", "dateValuePair": { "date": "2016-04-29T22:00:00.000Z", "va
javascript - 下划线，清除对象的所有值但保留键
我不知道这是否可能，但我试图做的是“清理”一个对象。基本想法是我有一个对象的表格(以 Angular )，然后单击我想添加一个新行(控制对象中的一个新项目，但我希望它没有值。我有下划线尝试一下。一些考
javascript - 下划线，过滤掉不需要的对象
所以我有一大堆对象需要将其变成一个小对象。它有 50-60 个对象，我需要过滤到一个新的对象数组中，其中只有 3 个。所以看起来像 myOb = {{"ob1": 1},{"ob2": 1},{"
javascript - 下划线，找到相同的键并替换值
我有一个像这样的对象 - {"house" : red, "car" : green, "apple" : blue}; 并且正在发送另一个带有单个键/值的对象，如下所示 {"apple" : gre
javascript - 将多个数组对象转换为单个数组，下划线
我有一个包含多个对象的数组，例如 var val = [ _id: ["5412fc1bd123cf7016674a92", "5412cf270e9ca9b517b43ca3"],
javascript - 下划线，将对象列表转换为对象值数组
所以我有一个对象列表，例如 var options = [{"car" : "red"},{"house": "green"},{"dog":"bark"}] 我正在尝试将其转换为一个值数组，
javascript - 下划线将数组转换为对象键
我正在尝试将此数组转换为对象。使用下划线，我想转换这个数组: [ { "id": "parentA", "children": [ { "nam
javascript - 下划线，错误检索值
我正在尝试使用这样的链检索嵌套项目值。我正在遍历的对象如下所示: var testStates = [{ "module": "module1", "customUrl
javascript - 单击工具提示时无法使所选文本变为粗体/下划线
我有一些内容可编辑的段落，我希望能够在双击时使某些单词加粗下划线。当我双击一个单词时，它会被选中，并显示一个包含 3 个选项的工具提示。但是，单击工具提示选项后，选择就会消失，并且文本不会发生任何更改
html - CSS 下划线
要在 CSS 中给文本加下划线，我们可以这样做: h3 {text-decoration:underline;} 然而，这只会强调包含在 h3 标签中的文本。如果想让下划线穿过页面怎么办？谢谢最佳
c - 排序数字(下划线)
我正在尝试解决我的最后一个问题，但我仍然不知道如何解决它。我的任务是编写一个对数字进行排序的程序，但是:我们的导师给了我们一些处理数字的程序的额外要点，例如:000054667(实际上是 54667)

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 下划线问题与形式