Хочу улучшить CSS код

Рейтинг: 1Ответов: 4Опубликовано: 20.07.2023

Есть у меня форма

картинка 1

И я хочу чтобы инпуты были в одну линию И я это делаю так

#name{
    margin-left: 49px;
}

#Adr{
    margin-left: 70px;
}

#N_m{
    margin-left: 68px;
}

#id{
    margin-left: 70px;
}

#Full_name{
    margin-left: 4px;
}

#Phone{
    margin-left: 5px;
}

Получается, то что я хочу. Но этот метод мне кажется топорным и глупым, может кто подскажет вариант лучше. введите сюда описание изображения

css html
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Вариант на Flex без строгой привязки к размерам элементов

.line {
  display: flex;
  margin-top: 10px;
}

label, input {
  flex: 1 1;
}
<div class="container">
  <div class='line'>
  <label>123</label>
  <input />
</div>
<div class='line'>
  <label>1234567890</label>
  <input />
</div>
<div class='line'>
  <label>12345</label>
  <input />
</div>
</div>

И еще один вариант, чтобы расположить элементы на всю ширину род. контейнера

.line {
  display: flex;
  margin-top: 10px;
  justify-content: space-between;
}
<div class="container">
  <div class='line'>
  <label>123</label>
  <input />
</div>
<div class='line'>
  <label>1234567890</label>
  <input />
</div>
<div class='line'>
  <label>12345</label>
  <input />
</div>
</div>

▲ 3

.wrapper {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
}

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
<div class="wrapper">
  <div class="parent">
    <span>Name</span>
    <input/>
  </div>
  <div class="parent">
    <span>Name name</span>
    <input/>
  </div>
  <div class="parent">
    <span>Name name Name name</span>
    <input/>
  </div>
</div>

▲ 2

Также подключусь со своим решением без flex'ов и вообще хоть какого-нибудь css.

Выровнять можно обычным table:

<table>
    <tr>
        <td>
            <label for="name">name:</label>
        </td>
        <td>
            <input type="text" id="name" />
        </td>
    </tr>
    <tr>
        <td>
            <label for="email">email:</label>
        </td>
        <td>
            <input type="text" id="email" />
        </td>
    </tr>
    <tr>
        <td>
            <label for="password">password:</label>
        </td>
        <td>
            <input type="text" id="password" />
        </td>
    </tr>
</table>
▲ 1

я хочу чтобы инпуты были в одну линию

Поскольку ТС не привел пример своей разметки - предложу такой вариант верстки для полей...

.line {
  display: flex;
  margin-top: 10px;
}
.line label {
  width: 100px;
}
<div class='line'>
  <label>123</label>
  <input />
</div>
<div class='line'>
  <label>1234567890</label>
  <input />
</div>
<div class='line'>
  <label>12345</label>
  <input />
</div>