html - 表单在移动浏览器中填充 100% 宽度

标签 html css

所以我试图让我的宽度在我的移动输入中达到 100%，现在它们看起来像下图。我将发布一个 jsFiddle 和一个片段，如果有人对我如何解决这个问题有任何想法，那就太棒了。谢谢你! Jsfiddle 更好地展示了这个问题，特别是因为它是移动的，我正在尝试改变。

JSFIDDLE:https://jsfiddle.net/wpz221qk/

enter image description here 

input{ 

	 border: none;
    border-bottom: 2px solid #959595;
	width:100%;
	margin:3px;
	color:#6C6A6A;
	padding-top:10px;
	padding-bottom: 10px;
	
	}
	
	.bottom{
		 border: none;
    
	
	margin:3px;
	
	color:#6C6A6A;
	padding-top:10px;
	padding-bottom: 10px;
	width:  300px;
	}
	.fa{
margin-right: 10px;



	}
	legend{
	color:white;
	}
	
.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color:#595959;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
  width: 150px;

}

.button:hover {background-color: #670809}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}



form.contact label{
display: block;
 
}

span{
display:block;
 border: none;
 color:white;
}

.clearfix:after {

  content:" ";

  display:block;

  clear:both;

}

section{
width: 95%;	

}
fieldset{
width: 45%;	
float:left;
border:none;

}

input.checks{
width: auto;	
}

.left{
width: 45%;
float:left;	
}
.right{
width:45%;
float: right;	
}
<div class="center clearfix" >
<h1 id="fourth">Contact</h1>

<form action="FormToEmail.php" method="POST" enctype="multipart/form-data" autocomplete="on" class="contact clearfix ">
<section class="clearfix">
<fieldset><legend>
<i class="fa fa-user" aria-hidden="true"></i>Personal Information
<hr class="style2">
</legend>
<label><span></span> <input name="first_name" type="text" value="" placeholder="First Name"  required/>
</label>
<label><span>
</span><input name="last_name" type="text" value="" placeholder="Last Name"  required/>
</label>
<label><span> </span><input name="date_of_birth" type="date" value="" placeholder="Date of Birth"  required/>
</label>

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

<label ><span></span> <input name="level_of_education" type="hidden" value="" placeholder="level of education"  required/></label>
<select class="bottom" name="education_level">
<option value="High School">High School</option>
<option value="Undergraduate">Undergradute</option>
<option value="Graduate">Graduate</option>
</select>






</fieldset>




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

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

<label><span></span><input name="phonenumber" value="" type="tel" placeholder="763-858-9564" /></label>

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



</fieldset>




</section>




<section class="clearfix column"  >


<fieldset><legend><i class="fa fa-laptop" aria-hidden="true"></i>
What are your Interests <hr class="style2"></legend>


<section class="clearfix column left"  >
<label class="bottom span" ><span ><input name="webdesign" value="web_design" type="checkbox" class="checks"/>Web Design</span>
</label>

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

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

</section>
<section class="clearfix column left"  >

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

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

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

</fieldset>



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

</i>

Continuation <hr class="style2 toosmall"></legend>

<section class="clearfix column left"  >

<legend class="smaller">You can contact me by:</legend>
<br>

<div class="squish">
<label  class="bottom"><span><input class="checks" name="contact_me" type="radio" value="phone" checked/>Contact me by phone</span></label>





<label  class="bottom"><span><input class="checks" name="contact_me" type="radio" value="email" checked/>Contact me by email</span></label>

<label  class="bottom"><span><input class="checks"  name="contact_me" type="radio" value="text"/>Contact me by text</span></label>
<br>
</div>
</section>


<section class="clearfix column left"  >
<legend class="smaller" >I'm interested in:</legend>
<br>

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


</fieldset>



</section>




<input class="button" name="submit_to_programmer" type="submit" value="Subm

最佳答案

将您的 fieldset 宽度更改为 100%。

这是一个DEMO 

input {
  border: none;
  border-bottom: 2px solid #959595;
  width: 100%;
  margin: 3px;
  color: #6C6A6A;
  padding-top: 10px;
  padding-bottom: 10px;
}

.bottom {
  border: none;
  margin: 3px;
  color: #6C6A6A;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 300px;
}

.fa {
  margin-right: 10px;
}

legend {
  width: 100%;
  color: white;
}

.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #595959;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
  width: 150px;
}

.button:hover {
  background-color: #670809
}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

form.contact label {
  display: block;
}

span {
  display: block;
  border: none;
  color: white;
}

.clearfix:after {
  content: " ";
  display: block;
  clear: both;
}

section {
  width: 95%;
}

fieldset {
  width: 100%;
  float: left;
  border: none;
}

input.checks {
  width: auto;
}

.left {
  width: 45%;
  float: left;
}

.right {
  width: 45%;
  float: right;
}
<div class="center clearfix">
  <h1 id="fourth">Contact</h1>

  <form action="FormToEmail.php" method="POST" enctype="multipart/form-data" autocomplete="on" class="contact clearfix ">
    <section class="clearfix">
      <fieldset>
        <legend>
          <i class="fa fa-user" aria-hidden="true"></i>Personal Information
          <hr class="style2">
        </legend>
        <label><span></span>
          <input name="first_name" type="text" value="" placeholder="First Name" required/>
        </label>
        <label><span>
</span>
          <input name="last_name" type="text" value="" placeholder="Last Name" required/>
        </label>
        <label><span> </span>
          <input name="date_of_birth" type="date" value="" placeholder="Date of Birth" required/>
        </label>

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

        <label><span></span>
          <input name="level_of_education" type="hidden" value="" placeholder="level of education" required/>
        </label>
        <select class="bottom" name="education_level">
          <option value="High School">High School</option>
          <option value="Undergraduate">Undergradute</option>
          <option value="Graduate">Graduate</option>
        </select>






      </fieldset>




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

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

        <label><span></span>
          <input name="phonenumber" value="" type="tel" placeholder="763-858-9564" />
        </label>

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



      </fieldset>




    </section>




    <section class="clearfix column">


      <fieldset>
        <legend><i class="fa fa-laptop" aria-hidden="true"></i> What are your Interests
          <hr class="style2">
        </legend>


        <section class="clearfix column left">
          <label class="bottom span"><span><input name="webdesign" value="web_design" type="checkbox" class="checks"/>Web Design</span>
          </label>

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

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

        </section>
        <section class="clearfix column left">

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

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

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

      </fieldset>



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

</i> Continuation
          <hr class="style2 toosmall">
        </legend>

        <section class="clearfix column left">

          <legend class="smaller">You can contact me by:</legend>
          <br>

          <div class="squish">
            <label class="bottom"><span><input class="checks" name="contact_me" type="radio" value="phone" checked/>Contact me by phone</span></label>





            <label class="bottom"><span><input class="checks" name="contact_me" type="radio" value="email" checked/>Contact me by email</span></label>

            <label class="bottom"><span><input class="checks"  name="contact_me" type="radio" value="text"/>Contact me by text</span></label>
            <br>
          </div>
        </section>


        <section class="clearfix column left">
          <legend class="smaller">I'm interested in:</legend>
          <br>

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


      </fieldset>



    </section>




    <input class="button" name="submit_to_programmer" type="submit" value="Submit" />
    <input type="hidden" value="Message from Car Website" name="subject">
    <input name="redirect" type="hidden" value="thanks.html">
  </form>

关于html - 表单在移动浏览器中填充 100% 宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41080120/

上一篇：css - 散列后如何定位 CSS 模块类？

下一篇：css - 将鼠标悬停在透明的 SVG 上

相关文章：

JavaScript改变两侧的显示样式

html - bgcolor 到表格的第 th 个，表格中可能有 70% 的宽度

javascript - 如何给xPage 重复控制项添加动画？

php - 如何通过 PHP 更新 jQuery 计算器中的价格

html - 为除一个类之外的所有元素创建一个 CSS 规则？

css - 通过 CSS 在屏幕宽度上切换背景图像

javascript - 为什么 Javascript 按钮不起作用？

javascript - 如何将自定义js添加到HTML

html - 即使在将 frameborder 设置为 0 之后，iframe 边框周围仍然存在空白

java - 使用 servlet 加载的图像始终显示红十字

©2024 IT工具网  联系我们