Снова выравнивание, снова ошибки, кто может дать cuff?

Question

[Darkness]

Есть label и есть input нужно чтобы они рядом были (горизонтально) и в центре div, находятся в разных div'ах
Жду подзатыльника, ребят, спасибо!

.label-name { 
    display: inline-block;
    text-align: right;
    width: 40%;
    padding: 5px;
    vertical-align: top;
    margin-top: 10px;
}  //label

#name {
    width: 280px;
    height: 20px;
    padding: 5px;
    margin: 10px;
    border: 1px solid #c0c0c0;
    border-radius: 2px;

окей, я добился чтобы они стояли рядом, но теперь никак их в колонку не поставить (общий контейнер делает каждый элемент в колонку, и по отдельности тоже, мне нужно чтобы label и input были рядом и в колонку друг под другом (скриншоты)


Как у меня

Comments

[Владимир]

Залей на codepen.io

[Rustam Bainazarov]

Владимир, вы не понимаете, это же знаменитое «визуальное программирование» :))

[Darkness]

SmthTo, Да, черт возьми!

[Darkness]

Владимир,
Там он в горизонталь , но у меня нет! Конечно, там 1 input, а у меня их 12.. поэтому может в этом беда

[Алексей]

Если я правильно понял codepen.io

[Rustam Bainazarov]

Антон Добрынин, я просто не очень понимаю, почему никто сразу не выкладывает в песочницы или ссылки, ибо без визуального понимания результата, чужой CSS-код читать сложно.

[Darkness]

Алексей,

Вот что у меня , код выше, должны быть рядом и по середине формы

[Алексей]

Антон Добрынин, всем флекс и все выравнивается хорошо

[Rustam Bainazarov]

Антон Добрынин, э-э-э? Всё нормально же, задача у вас выполнена, или я не понял?

[Darkness]

SmthTo, вот именно! что тут то она выполнена, а вот у меня она кривая, там только больше элементов, может из-за этого

[Rustam Bainazarov]

Антон Добрынин, ну так тогда кидай ссылку. Ну ёмоё, ну что ж такое.

[Darkness]

SmthTo,
Они рядом, все гуд, но не друг под другом

[Darkness]

Всем пишу, то что там много id'шников ( на самом деле их больше) это норм, мне по заданию нужно так.

[Rustam Bainazarov]

Антон Добрынин, э-э-э?

[Rustam Bainazarov]

Короче, выкладывай полный код, иначе помочь тебе нельзя нормально.

[Darkness]

SmthTo, это полный код . Мне нужно чтобы они списком были. Скриншот же прикрепил как нужно

[Rustam Bainazarov]

Антон Добрынин, а, раньше не было скриншота в вопросе, но я уже вышел из дома :))

[Darkness]

SmthTo, ОУУУУ .. я тут застрял! И не могу ничего сделать, не выходит из головы эта форма!

[Rustam Bainazarov]

Антон Добрынин, написал ответ с телефона, думаю, сможешь разобраться, ибо не сложно там.
Чтобы без геморроя с размерами, нужно делать с обертками. Да и в целом это правильнее.
И того обилия свойств, что у тебя в примере, там совершенно не нужно.

Answer 1

[Rustam Bainazarov]

Comments

[Darkness]

Да, ты прав, ты поставил их друг под другом, но вот теперь, они в центр не встаю :с

[Darkness]

[Darkness]

Ты flex'ом все залил (ширину) , ааа

[Rustam Bainazarov]

Антон Добрынин, чтобы было по центру -- центруй на уровне их родителя.

[Darkness]

SmthTo, demo родитель, отцентровал, и body есть (для самой формы), но нет реакции

[Rustam Bainazarov]

Антон Добрынин, бло... пришли код.

Обязательно учи CSS, это не дело. Тем паче такая простая задача.

[Darkness]

SmthTo, вот так и во flex разочаровываешься :
для label

display: inline-block;
    text-align: right;
    width: 40%;
    padding: 5px;
    vertical-align: top;
    margin-top: 10px;

для инпат

display: inline-block;
    text-align: left;
    width: 48%;
    vertical-align: middle;

[Darkness]

SmthTo, + твой код = равно по центру и рядом! НАКОНЕЦ! еще 12 таких сделать и все :)
СПАСИБО!

[Rustam Bainazarov]

Антон Добрынин, мда-мда...

Не за что!

[Darkness]

SmthTo, я в JS заморачиваюсь каждый день, css на свовах знаю, понимаю, но вот практики не хватает!Спасибо!