Расположение блоков формы в HTML

Question

Расположение блоков формы в HTML

Екатерина Л. Профи (807), на голосовании 5 месяцев назад

Здравствуйте, помогите, пожалуйста

Задали сделать задачу:

Не получается расположить 3 последние алимента в 1 строку.

Мой результат:

Мой код:

Ошибка в этих, скорее всего, строчках:

 #uend { 
    max-width: 50px; 
    min-width: 50px; 
    font-size: 18px; 
    background-color: #87D7D7; 
    text-align: center; 
    margin: 0 auto; 
    line-height: 150%; 
} 
 
#uend2 { 
    max-width: 50px; 
    min-width: 50px; 
    font-size: 18px; 
    background-color: #87D7D7; 
    text-align: center; 
    margin: 0 auto; 
    line-height: 150%; 
} 
 
#ucvc { 
    max-width: 50px; 
    min-width: 50px; 
    font-size: 18px; 
    background-color: #87D7D7; 
    flex-direction: row; 
    text-align: center; 
    margin: 0 auto; 
    line-height: 150%; 
}

Помогите, ПОЖАЛУЙСТА, как их можно выравнять 3 элимента в 1 строку?

Answer 1

LV Мудрец (17199) 6 месяцев назад

Для расположения блоков в один ряд в CSS можно использовать несколько методов. Один из самых простых способов — это использование свойства «display» со значением «inline-block» для каждого блока. Такие блоки будут располагаться в одну линию и автоматически переноситься на новую строку при достижении ширины родительского контейнера.
Источник: https://uchet-jkh.ru/i/kak-raspolozit-bloki-v-odin-ryad-v-css

Дарю ДарыУченик (151) 6 месяцев назад

Пробовала тоже(
#uend {
max-width: 50px;
min-width: 50px;
font-size: 18px;
background-color: #87D7D7;
text-align: center;
margin: 0 auto;
line-height: 150%;
display: inline-block;
}

#uend2 {
max-width: 50px;
min-width: 50px;
font-size: 18px;
background-color: #87D7D7;
text-align: center;
margin: 0 auto;
line-height: 150%;
display: inline-block;
}

#ucvc {
max-width: 50px;
min-width: 50px;
font-size: 18px;
background-color: #87D7D7;
flex-direction: row;
text-align: center;
margin: 0 auto;
line-height: 150%;
display: inline-block;
}

Изменений нет(

LV Мудрец (17199) Дарю Дары, unumber у вас в процентах от границ окна.а нижние блоки - в пикселях

LVМудрец (17199) 6 месяцев назад

cделайте общий div на три нижних блока

LVМудрец (17199) 6 месяцев назад

поставьте просто width: 50px;
зачем это max-width: 50px;
min-width: 50px;

Дарю ДарыУченик (151) 6 месяцев назад

ПОЛУЧИЛОСЬ!!! СПАСИБО БОЛЬШОЕ!!!

LV Мудрец (17199) Дарю Дары, за счет чего получилось?

Answer 2

Их кидаешь в одну обертку/контейнер и этому контейнеру задаешь свойство: display: flex; gap: 15px. (gap- расстояние между дочерними элементами, задавай под макет) или как в твоем случае макета то justify-content: sb, чтобы расстояние у них было по максимальной ширине родительского элемента, но обязательно задай ограничительную ширину родителя или всего контента в блоке