Html 使用CSS grid和Flexbox将不同网格单元中的水平相邻元素对齐
目前,我正在使用grid和flexbox的混合来尝试实现表单的布局 我希望两个Html 使用CSS grid和Flexbox将不同网格单元中的水平相邻元素对齐,html,css,sass,flexbox,css-grid,Html,Css,Sass,Flexbox,Css Grid,目前,我正在使用grid和flexbox的混合来尝试实现表单的布局 我希望两个input元素水平排列而不设置高度。如果要在文本输入上应用填充,则该范围应继续垂直居中,且输入与该范围相邻 此外,我希望标签元素也保持水平对齐 请建议不需要更改标记或使用Javascript的解决方案 目前我拥有的: 我正在努力实现的目标: 我知道我可以在靶场上使用固定高度或填充物来对齐它,但我正在尝试使其尽可能流畅 HTML: <form class="grid"> <div class="
input
元素水平排列而不设置高度。如果要在文本输入上应用填充,则该范围应继续垂直居中,且输入与该范围相邻
此外,我希望标签
元素也保持水平对齐
请建议不需要更改标记或使用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>
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;
}
您也可以查看
非常感谢
**编辑** 应支持多行标签,如果标签包裹多行,元素仍应水平对齐 多行标签示例:请在“组”类中尝试此操作。 (或使用该样式的元素的新类)
我最初尝试过这个方法,但现在的问题是
标签
元素彼此不对齐…如何将flex:1
添加到范围包装器
类中,并从标签2
中删除页边距底部
,如果它是多行标签会发生什么,示例:我认为给输入和范围包装指定一个特定的高度,并将justify content:center
添加到group
类会更容易。这是密码笔:你忘了付零钱了吗?我真的反对固定高度的定位有多种原因。例如,如果我决定更改根字体大小,这可能会导致布局中断。没有CSS属性或布局methid允许对齐不共享父元素的元素。您可以做的是将组div中的最后一项一直强制到行的底部…类似于这样-这与将页边距底部:auto
添加到标签
元素。另外,如果我想把更多的input
组放到网格中,那就行不通了。而且,这实际上并没有解决输入
和范围
相邻之间的对齐问题。正如我所说……没有CSS方法可以解决这个问题。
.group {
display: flex;
flex-direction: column;
justify-content: center;
label {
margin-bottom: 10px;
}
}