我正在尝试制作 <form>
所有<input>
和 <select>
选项像这样对齐期望的结果:
如您所见,文本 <input>
正确对齐,但下拉菜单与它们不对齐。我的代码如下。
HTML:
<form id="survey-form">
<div class="row">
<label for="name">* Name:</label>
<input type="text" id="name" class="input-field" required placeholder="Enter your name">
</div>
<br>
<div class="row">
<label for="email">* Email:</label>
<input type="email" id="email" class="input-field" required placeholder="Enter your email">
</div>
<br>
<div class="row">
<label for="number">*Age:</label>
<input type="number" min="1" id="number" required class="input-field" placeholder="Age">
</div>
<br>
<div class="row">
<label for="role">Which option best describes your current role?</label>
<select name="role" id="role" class="input-select">
<option value="student">Student</option>
<option value="full-time-job">Full Time Job</option>
</div>
<option value="full-time-learner">Full Time Learner</option>
<option value="prefer-not-to-say">Prefer not to say</option>
<option value="other">Other</option>
</select>
</form>
CSS:
.row {
display: flex;
align-items: center;
justify-content: flex-end;
}
.input-field {
margin-left: 1em;
padding: .5em;
margin-bottom: .5em;
height: 20px;
width: 280px;
border: 1px solid gray;
border-radius: 2px;
}
.input-select {
margin-left: 1em;
padding: .5em;
margin-bottom: .5em;
width: 100px;
height: 40px;
border: 1px solid gray;
border-radius: 2px;
}
我试图调整 justify-content
, align-items
, display
,和其他相关的 CSS,但似乎没有得到我的 <select>
和 <input>
排在一起。
最佳答案
从您的代码开始,一个简短的方法可能是:
1- 向表单添加左/右边距并指定 width
和 max-width
,例如
#survey-form {
width: 70%;
max-width: 640px;
margin: 0 auto;
}
2- 在 label
和 input
/select
字段上赋予相等的 flex-basis
。同时分配 box-sizing: border-box
.row > * {
flex-basis: 50%;
box-sizing: border-box;
}
3- 将标签右对齐
.row label {
text-align: right;
}
关于html - 以相同方式对齐 <input> 和 <option> 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54910644/