В настоящее время я использую смесь между grid и 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