1

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

картинка 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;
}

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

2

4 ответа 4

2

.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>

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>

1
  • Ты полностью уверен в нужности такого форматирования форм? :)
    – ksa
    Commented 20 июл. 2023 в 9:54
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>

4
  • Но зачем привязка к конкретному width label? Это же плохой вариант получается, не сильно лучше изначального варианта ТС
    – Gelloiss
    Commented 20 июл. 2023 в 9:37
  • @Gelloiss, тут привели несколько других вариантов - используй их.
    – ksa
    Commented 20 июл. 2023 в 9:38
  • Та я свой вариант написал) Просто реально зачем эта строгая привязка к размеру? по-моему, это плохой подход
    – Gelloiss
    Commented 20 июл. 2023 в 9:46
  • 1
    @Gelloiss, я не могу ответить на твой вопрос, т.к. изначально проблема вообще не моя. Пусть ТС выбирает любой вариант решения.
    – ksa
    Commented 20 июл. 2023 в 9:51
1

Также подключусь со своим решением без 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>
2
  • Можно. Но зачем? Чем вам css не угодил?))
    – Gelloiss
    Commented 20 июл. 2023 в 9:36
  • @Gelloiss если вам обязательно нужен css - велком использовать другие варианты, представленные здесь)) Просто как альтернатива, почему нет?))
    – lisabugx
    Commented 20 июл. 2023 в 9:42

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.