【发布时间】：2018-11-08 13:08:59
【问题描述】：
我是 HTML/CSS 新手，对我的 CodeCamp 项目有一些疑问
如何将标签和输入移动到表单的中心？我尝试在我的行类上使用 text-align: center 但它只分隔标签和输入。
为什么复选框没有组合在一起？我已经尝试扩大底部边距，但它会将复选框放在标签应该在的左列中。
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: 'Nunito', sans-serif;
background-color: #ea8a8a;
}
#title {
color: #685454;
text-align: center;
padding: 10px;
}
#description {
color: #685454;
text-align: center;
padding: 10px;
}
#outer-form {
border-radius: 10px;
background-color: #ebd5d5;
padding-bottom: 10px;
}
.row {}
.label {
color: #685454;
display: inline-block;
text-align: right;
float: left;
padding-top: 5px;
width: 190px;
margin-right: 20px;
}
#name {
padding: 4px;
margin-top: 5px;
margin-bottom: 5px;
display: inline-block;
vertical-align: middle;
margin-left: 20px;
width: 110px;
}
#email {
padding: 4px;
margin-top: 5px;
margin-bottom: 5px;
display: inline-block;
vertical-align: middle;
margin-left: 20px;
width: 110px
}
#number {
padding: 4px;
margin-top: 5px;
margin-bottom: 5px;
display: inline-block;
vertical-align: middle;
margin-left: 20px;
width: 110px
}
#dropdown {
height: 30px;
margin-top: 5px;
margin-bottom: 14px;
display: inline-block;
vertical-align: middle;
horizontal-align: bottom;
margin-left: 20px;
width: 120px
}
input[type=radio] {
margin-left: 20px;
margin-bottom: 30px;
vertical-align: baseline;
margin-top: 20px;
}
input[type=checkbox] {
margin-left: 20px;
vertical-align: baseline;
}
#comments {
margin-top: 10px;
margin-bottom: 5px;
vertical-align: middle;
margin-left: 20px;
width: 150px;
height: 50px;
}
#submit {
background-color: #ea8a8a;
color: white;
border-radius: 5px;
font-size: 14px;
margin-top: 10px;
margin-bottom: 20px;
display: inline-block;
vertical-align: middle;
margin-left: 160px;
width: 100px;
height: 40px;
}<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:400,700">
<h1 id="title">Doge Adoption Form</h1>
<div id="outer-form">
<p id="description">Please fill out the questionare below</p>
<form id="survey-form">
<div class="row">
<label class="label" id="name-label" for="name">Name: </label>
<input id="name" placeholder="Enter your name" required> </input>
</div>
<div class="row">
<label class="label" id="email-label" for="email">Email: </label>
<input id="email" type="email" placeholder="Enter your email" required> </input>
</div>
<div class="row">
<label class="label" id="number-label" for="age">Age: </label>
<input id="number" min="18" max="99" type="number" placeholder="Age:" required> </input>
</div>
<div class="row">
<text class="label">What is your favorite dog: </text>
<select id="dropdown">
<option value="Pomeranian"> Pomeranian</option>
<option value="Beagle"> Beagle</option>
<option value="German Shepard"> German Shepard</option>
</select>
</div>
<div class="row">
<label class="label">How likely are you to pick up doge poop:</label>
<input type="radio" name="odds" value="very likely"> Very Likely
<input type="radio" name="odds" value="not likely"> Not Likely
</div>
<div class="row">
<label class="label"> What tricks will you teach (select all that apply)</label>
<input type="checkbox" name="trick" value="Sit">Sit<br>
<input type="checkbox" name="trick" value="Army crawl">Army crawl<br>
<input type="checkbox" name="trick" value="Roll over">Roll over<br>
<input type="checkbox" name="trick" value="Speak">Speak<br>
</div>
<div class="row">
<label class="label">Any additional information?</label>
<textarea id="comments" placeholder="Enter your comment here..."></textarea>
</div>
<div class="row">
<input id="submit" type="submit" value="Submit">
</div>
</form>
</div>【问题讨论】：
-
为什么复选框没有组合在一起是什么意思？第一部分尝试：
#survey-form{ width: 400px; margin: 0 auto; } -
你好。感谢您的建议。所以目前单选按钮和复选框位于表单的右侧。但由于某种原因，它们的文本与标签应该在的表单左侧重叠，这是我不想要的。
-
我认为您希望将它们包装在一个 div 中——对您的所有输入都这样做可能是个好主意。看看w3schools.com/howto/howto_css_responsive_form.asp——除了不使用 col-75 类，而是使用允许您将页面中间保持在表单中心的大小。不过，有一百万种方法可以做到这一点。还要注意同时使用填充和边距——这只有在你有边框时才有帮助。我只会使用边距。
标签： html css codecampserver