目前,我正在使用网格和flexbox之间的混合物来尝试实现表单的布局。
我希望两个input
元素都水平排列而不设置高度。如果我要在文本输入上申请填充,则该范围应继续在垂直于输入与之相邻的位置居中。
我还希望label
元素也保持水平对齐。
请提出不要要求更改标记或使用Javascript的解决方案。
我知道我可以在范围上应用固定的高度或填充以使其对齐,但我正在尝试使其尽可能流畅。
HTML:
<form class="grid">
<div class="group">
<label for="input-1">Label 1</label>
<input type="text" id="input-1" placeholder="placeholder" />
</div>
<div class="group">
<label for="input-2">Label 2</label>
<div class=range-wrapper>
<input type="range" id="input-2" placeholder="placeholder" />
<output>0</output>
</div>
</div>
</form>
SCSS:
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
}
.grid {
width: 80%;
max-width: 960px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 40px 10px;
padding: 50px;
background: #ccc;
}
.group {
display: flex;
flex-direction: column;
margin-top: auto;
label {
margin-bottom: 10px;
}
}
input {
font-size: inherit;
&[type="text"] {
padding: 14px;
}
&[type="range"] {
width: 100%;
}
}
.range-wrapper {
display: flex;
align-items: center;
output {
padding: 10px;
}
您还可以签出codepen here。
非常感谢!
** 编辑 **
应支持多行标签,如果标签将多行换行,则元素仍应水平对齐。
多行标签示例:Codepen
答案 0 :(得分:1)
为您的“小组”课程尝试一下。 (或使用这种样式对该元素使用新类)
.group {
display: flex;
flex-direction: column;
justify-content: center;
label {
margin-bottom: 10px;
}
}