个人中心
gpt4 book ai didi

html - 如何在不使用 javascript 或表格的情况下排列年龄和姓名输入框

转载 作者：行者123 更新时间：2023-11-27 23:20:30 25 4
gpt4 key购买 nike

我正在尝试找到一种方法来排列姓名、电子邮件和年龄的输入框。这些框排成一行，用于填写姓名和电子邮件。但是，如何更改宽度或边距以使输入框对齐以匹配名称和电子邮件的宽度或边距。

此外，如何使“哪个选项最能描述您当前的 Angular 色”标签旁边的选项值框变大？

我尝试调整宽度、边距以使框与电子邮件/年龄对齐，但它不起作用。似乎当我执行 margin-left 时，它会将标签移到离输入框更远的地方。 

#Title{
  text-align: center;
}
#description{
  text-align: center;
}
body{
  background-color: #a9d7d1;
  margin: 50px 200px 20px 200px;
}
#Survey-form{
  background-color: #f0f0f0;
  text-align: center;

}

#Name{
  text-align: left;
  width: 200px;
  height: 25px;
  display:inline-block;

}
#Email{
  text-align: left;
  width: 200px;
  height: 25px;
  display:inline-block;

}
#Age{
  text-align: left;
  width: 200px;
  height: 25px;
  display:inline-block;
}

label[for=role]{
margin-left: -345px;
width: 40px;

select required {
    width: 450px;
    margin: 10px;
}

div{

}
<html>
<head>
  <title>Survey Form </title>
<!-- Survey Form. -->
<link href="SurveyForm.css" rel=stylesheet>

</head>
<body>

  <h1 id="Title"> Survey Form </h1>


  <form id="Survey-form">
    <p id="description">Let us know how we can improve freeCodeCamp </p>

  <!-- <p>  -->
  <div>
   <br />  <label>Name:</label>
    <input type="text" name="Name" id="Name" placeholder="Enter your name">
  </div>
  <div>
   <br />  <label>Email:</label>
    <input type="email" name="Email" id="Email" placeholder="Enter your email"><br>
</div>

<div>
 <br />  <label> Age:</label>
  <input type="number" min = "18" max="110" name="Age" id="Age" placeholder="Age">
</div>

<div>
 <br />  <label for="role">Which option best describes your current role?</label>
    <select required>
      <option value="selected disabled">Select an option </option>
    <option value="Student">Student</option>
    <option value="FullTimeJob">Full Time Job</option>
    <option value="FullTimeLearner">Full Time Learner</option>
    <option value="NotToSay">Prefer Not to Say</option>
    <option value="Other">Other</option>
  </select>
</div>

<p>How likely is that you would recommend
  <br>freeCodeCamp to a friend?

 <br><input type="radio" name="recommend" class="recommend" value="Definetly"> Definetly
  <br>  <input type="radio" name="recommend" class="recommend" value="Maybe"> Maybe
<br>  <input type="radio" name="recommend" class="recommend" value="NotSure"> Not Sure



<p>  <label for="FCC">What do you like most in FCC: </label>
    <select required>
      <option value="selected disabled">Select an option </option>
    <option value="Challenges">Challenges</option>
    <option value="Projects">Projects</option>
    <option value="Community">Community</option>
    <option value="Open Source">Open Source</option>
  </select>

  <p>Things that should be improved in the future.<br />(Check all that apply):
<br />  Front-end Projects: <input type="checkbox" name="sports" value="Front-end Projects">
<br />  Back-end Projects: <input type="checkbox" name="sports" value="Back-end Projects" >
<br />  Challenges: <input type="checkbox" name="sports" value="Challenges">
<br />  Open Source Community: <input type="checkbox" name="sports" value="Open Source Community">
  <br />  Gitter help rooms: <input type="checkbox" name="sports" value="Gitter help rooms" >
  <br />  Videos: <input type="checkbox" name="sports" value="Videos" >
  <br />  City Meetups: <input type="checkbox" name="sports" value="City Meetups" >
  <br />  Wiki: <input type="checkbox" name="sports" value="Wiki" >
  <br />  Forum: <input type="checkbox" name="sports" value="Forum" >
  <br />  Additional Courses: <input type="checkbox" name="sports" value="Additional Courses" >
<p>
  Any Comments or Suggestions?
  <textarea rows="4" cols="44" name="comment" form="usrform">
     Enter your comment here...</textarea>

   </p><input type="submit" value="Submit">


</form>

      </body>
      </html>

这些框应该排成一行，我想让标签的选择选项框更大哪个选项最能描述您当前的 Angular 色？

最佳答案

给你，使用 wrapper .row 包装你的输入元素然后分成两列.right, .left相应地设置相关宽度并使用 display: inline-block;创建网格。

您可以使用 ul创建radio和 checkbox像我在下面做的那样列出并摆脱 <br/> 

.form {
  max-width: 900px;
  width: 75%;
  padding: 10px;
  background: #fff;
}

div.row {
  display: block;
  margin-bottom: 10px;
}

div.right {
  width: 45%;
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

div.left {
  width: 30%;
  display: inline-block;
  text-align: right;
  vertical-align: top;
}

.input-list {
  display: block;
  list-style: none;
  padding: 0;
}

.radio-li, .checkbox-li {
  display: block;
  padding-bottom: 10px;
}

.radio, .checkbox {
  float: left;
  margin-right: 5px;
  background: #000;
}
<div class="row">
           <div class="left">
             <label>Name:</label>
           </div>
           <div class="right">
             <input type="text" name="name" class="input" placeholder="Enter your name">
           </div>
         </div>
         <div class="row">
           <div class="left">
             <label for="role">Which option best describes your current role?</label>
           </div>
           <div class="right">
              <select>
                 <option value="selected disabled">Select an option </option>
                 <option value="Student">Student</option>
                 <option value="FullTimeJob">Full Time Job</option>
                 <option value="FullTimeLearner">Full Time Learner</option>
                 <option value="NotToSay">Prefer Not to Say</option>
                 <option value="Other">Other</option>
              </select>
           </div>
         </div>
         <div class="row">
           <div class="left">
             <label for="role">How likely is that you would recommend freeCodeCamp to a friend?</label>
           </div>
           <div class="right">
             <ul class="input-list">
               <li class="radio-li"><label>Definetly<input type="radio" name="recommend" class="recommend radio" value="Definetly"></label></li>
               <li class="radio-li"><label>Maybe <input type="radio" name="recommend" class="recommend radio" value="Maybe"></label></li>
               <li class="radio-li"><label>Not Sure <input type="radio" name="recommend" class="recommend radio" value="NotSure"></label></li>
             </ul>
           </div>
         </div>
         <div class="row">
           <div class="left">
             <label for="role">Things that should be improved in the future.(Check all that apply):</label>
           </div>
           <div class="right">
             <ul class="input-list">
               <li class="checkbox-li"><label>Front-end Projects: <input type="checkbox" name="sports" class="checkbox" value="Front-end Projects"></label></li>
               <li class="checkbox-li"><label>Back-end Projects: <input type="checkbox" name="sports" class="checkbox" value="Back-end Projects" ></li>
               <li class="checkbox-li"><label>Challenges: <input type="checkbox" name="sports" class="checkbox" value="Challenges"></label></li>
             </ul>
           </div>
         </div>
         <div class="row">
           <div class="left">
             <label for="role"> Any Comments or Suggestions?</label>
           </div>
           <div class="right">
             <textarea rows="4" cols="30" name="comment" form="usrform">Enter your comment here...</textarea>
           </div>
         </div>

关于html - 如何在不使用 javascript 或表格的情况下排列年龄和姓名输入框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58036484/

25 4 0
文章推荐： javascript - 为什么放大和缩小功能在使用 jquery 的 firefox 中不能正常工作？
文章推荐： c++ - Qt4 与 UI 线程的接口(interface)
文章推荐： javascript - 错误未知提供商 : $scopeProvider <- $scope when using $injector to inject $scope into controller
文章推荐： javascript - 拖放(交换、删除)JavaScript
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com