Выравнивание контактной формы HTML CSS [закрыто] ⇐ Html

[Anonymous]

Я новый разработчик, изучая HTML и CSS. Я практикую, создавая контактную форму, но я сталкиваюсь с проблемами выравнивания. Несмотря на использование дисплея: блок и гибкость, входы формы выровнены по горизонтали и не напоминают типичную контактную форму. Может ли кто -нибудь помочь мне в решении этого? Тем не менее, все поля ввода в настоящее время выровнены по горизонтали. < /P>
Шаги для воспроизведения:
1. Структура HTML: < /p>





User Profile Registration




User Profile Registration


Registration form



Full Name:




Username:



Email:




Password:



Phone Number:



Date of Birth:



Gender:


Male


Female


Other




Skills:


HTML


CSS


JavaScript




Experience Level:

Select your experience
Beginner
Intermediate
Advanced



Upload Profile Picture:



How satisfied are you?



Short Bio:





I agree to the terms and conditions


Register






< /code>

css -стиль: < /p>

{
Маржа: 0;
Padding: 0;
box-size: border-box;
font-family: 'courier new', courier, monospace;
} < / li>
< /ul>
body {
фоновое цветное цвето : auto;
display: block; < /p>
}
h1 {
font-family: system-ui, -apple-system, Blinkmassystemfont, 'Segoe Ui', Roboto, Oxygen, Ubuntu, Cantarell, «Open sans», «Helvetica neue», Sans-seriffield;
Text-align: Center;
Padding-top: 4em; Br /> font-size: 30px;
} < /p>
fieldset {
Дисплей: Block;
min-width: 50%;
Маржинал: 10px;
padding-top: 30px;
padding-left: 60px;
граница -radius: 8px;
align-items: center;
} < /p>
#fname
{
display: inline block;
} < /p>
#usname < /p>
{
padding-left: 50px;
display: inline-block;
} < /p>
#pwrd
{
padding-left: 50px;
display: inline block;
} < /p>
#mail {
margin-top: 5px;
display: inline block;
} < /p>
#tel
{
margin-top: 5px;
display: inline block;
} < /p>
#datebirth
{
padding-left: 50px;
display: inline block;
}
Legend {
text-align : center;
padding-top: 0px;
font-size: lizer;
} < /p>
метка {
show: Block;
/* Margin-top: 1em; * /
font-family: 'courier new', courier, monospace;
font-weight: bold;
color: cadetblue;
} < /p>
Метка: первый в своем типе {
margin-top: 0;
} < /p>
input {
padding:0.5em;
border: solid 1px #ccc;
} < /p>
input [type = "text"]
{
Ширина: 20ем ;;
border-radius: 5px;
text-align: center;
font-family: 'courier new', courier, monospace;
margin-bottom: 5px;
} < /p>
#email
{
width: 20em ;;
border-radius: 5px;
text-align: center;
font-family: 'courier new', courier, monospace;
margin-bottom: 5px;
} < /p>
#password
{width: 20em;
text-align: center;
font-family: 'courier new', courier, Monospace;
border-radius: 5px;
margin-bottom: 5px;} < /p>
#phone
{
Ширина: 20ем;
text-align: center;
font-family: 'courier new', courier, monospace;
border-radius: 5px;
margin-bottom : 5px;

} < /p>
#dob
{
width: 20ем;
text-align: Центр;
font-family: 'courier new', courier, monospace;
border-radius: 5px;
margin-bottom: 5px;
} < /p>
.gender-options
{display: flex;
Gap: 15px;
align-items: center;
щит-нижний: 5px;} < /p>
.checkbox-group
{
display: flex;
Gap: 15px;
align-items: center;
#gendermenu
{
Padding-left: 10px;
Display: inline-block;
} < /p>
#skillmenu
{
padding-top: 10px;
padding-left: 50px ;
display: inline block;
} < /p>
< /li>
< /ol>
Ожидаемое Результат:
Каждая метка и его соответствующая входная/Textarea должны отображаться на новой строке, создавая вертикальную макет форм.
Все этикетки и поля ввода отображаются в одной горизонтальной линии. li>
Снятие дисплея: изгиб из формы приводит к тому, что входные укладки вертикально, но я хочу использовать Flexbox для лучшего контроля над макетом. < /li>
< /ul>
Может ли кто -нибудь помочь мне понять, почему текущий CSS не производит желаемое вертикальное выравнивание, и предложить, как достичь стандартной компоновки контактной формы с помощью Flexbox? < /P>
Заранее спасибо за помощь.


Подробнее здесь: https://stackoverflow.com/questions/794 ... -alignment