【发布时间】：2019-03-26 11:24:16
【问题描述】：
我试图弄清楚如何垂直排列 3 个或更多复选框或单选按钮。我可以让两个工作，但其中三分之一破坏了设计。我有代码，所以任何人都可以看到我在说什么
https://codepen.io/adgoetz89/pen/jJROOm
@import url('https://fonts.googleapis.com/css?family=Margarine');
body {
background: linear-gradient(195deg, #4e9131, #527842, #46941c, #41633c);
}
.content {
max-width: 500px;
margin: auto;
background: linear-gradient(95deg, #a8ff79, #7cc75a);
padding-left: 20px;
}
#title {
font-family: Margarine;
font-size: 42px;
}
p {
font-family: Margarine;
}
label {
float: left;
padding-right: 10px;
width: 100px;
text-align: right;
margin-top: 10px;
clear: left;
}
input,
textarea,
select {
margin-top: 10px;
}
#interest-label {
;
}
#submit-form {
margin-left: 100px;
padding: 15px;
}<html>
<body>
<main>
<div class="content">
<h1 id="title">Take our survey!</h1>
<article>
<p id="description">We appreaciate your service! If you would like, please let us know how we are doing by filling out our survey.</p>
</article>
<form action="index.html" method="post" id="survey-form">
<Section id="contactinfo">
<div>
<label id="name-label" for="name">Name:</label>
<input type="text" name="name" placeholder="Enter your name" id="name" required>
</div>
<div>
<label id="email-label" for="email">E-Mail:</label>
<input type="email" name="email" placeholder="Enter your e-mail" id="email" required>
</div>
<div>
<label id="number-label" for="phone">Phone:</label>
<input type="number" name="phone" placeholder="Enter your phone number">
</div>
<div>
<label id="age-label" for="phone">Age:</label>
<input type="number" name="age" placeholder="Age" min="18" max="100" id="number">
</div>
<div>
<label id="interest-label" for="interest">Interest:</label>
<input type="checkbox" name="stock1" value="old">Old stock<br>
<input type="checkbox" name="stock2" value="new">New stock<br>
</div>
<div>
<label id="gender-label" for="gender">Gender:</label>
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female
</div>
</section>
<section id="approval">
<div>
<label id="ratinglabel" for="rating">Order quality:</label>
<select name="rating" id="dropdown">
<option value="excellent">Excellent</option>
<option value="good">Good</option>
<option value="fair">Fair</option>
<option value="poor">Poor</option>
</select>
</div>
</section>
<section id="comments">
<div>
<label id="messagelabel" for="message">Comments:</label>
<textarea name="message" rows=4 cols=3 0 id="textinput">
</textarea>
</div>
</section>
<section id="submission">
<div id="submit-form">
<input type="submit" name="submit" id="submit">
</div>
</section>
</form>
</div>
</main>
</body>
</html>#main {
font-size: 14px;
font-family: Montserrat, Helvetica;
background: linear-gradient(180deg, #f5c5ba,
#f5d4ba, #f5e2ba);
border: 2px solid;
border-radius: 5px;
text-align: center; }
只要我添加第三个复选框或单选按钮，代码就会混乱
【问题讨论】：
-
问题在于标签只是浮动的。两个复选框/收音机仍然产生足够少的“高度”以保持在标签旁边，但允许更多的“高度”在其下方流动。一个简单的解决方法是将输入放入额外的分组容器 div 中，并将其设置为
display:inline-block。 -
请在问题本身内创建一个minimal reproducible example - 指向 codepen 的链接很好，但除非复制问题所需的所有代码都在问题内，否则问题不在主题
-
不要使用
搜索如何在css中设置显示