【发布时间】：2019-09-21 00:55:22
【问题描述】：
我正在尝试找到一种方法来排列姓名、电子邮件、年龄的输入框。这些盒子排列着姓名和电子邮件。但是，如何更改宽度或边距以对齐输入框以匹配名称和电子邮件。
另外，如何使“哪个选项最能描述您当前的角色”标签旁边的选项值框变大？
我尝试调整宽度、边距以尝试使框与电子邮件/年龄对齐，但它不起作用。似乎当我做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>这些框应该排成一行，我想让标签的选择选项框更大 哪个选项最能描述您当前的角色？
【问题讨论】：
-
对不起，我觉得我解释得不好。我不希望标签名称位于输入框上方。我对齐的方式是正确的，但是年龄输入框与名称电子邮件框的位置不匹配。我想在这里模仿这种形式，但不使用他们的代码：codepen.io/freeCodeCamp/full/VPaoNP
-
对于初学者，您的代码中的 Age 之前有一个空格。如果您想学习如何进行自定义输入，请查看 w3schools 了解基础知识。 w3schools.com/howto/tryit.asp?filename=tryhow_custom_select
-
试试这种风格
label,input{display:inline)