Выравнивание метки и ввод 3: 1 - PullRequest
Новая
       19

Выравнивание метки и ввод 3: 1

0 голосов
/ 29 апреля 2018

У меня есть входы и метки во внутреннем информационном классе, и я хочу, чтобы каждая метка и вход выравнивались по 1: 3 в одной строке независимо от размера экрана, плюс я не буду возражать против использования классов flex, я просто хочу решение. Приветствия

CSS 

.info {
    border: 2px solid steelblue;
    border-radius: 10px;
    padding: 10px;
}

.info input[type = 'text']{
    margin: 10px;
    padding: 5px;
    border: 2px solid orange;
    border-radius: 10px;
}

JSX 

<div className = 'form'>

    <h3 id = 'intro'>Join Us Here</h3><hr/>

    <div className = 'info'>
        <div>
            <label>Business Name:</label> <input type='text' placeholder='Business Name' />        
        </div>
        <div>
            <label>Owner Name:</label> <input type='text' placeholder='Owner Name' />
        </div>
        <div>
            <label>Receptionist Name:</label> <input type='text' placeholder='Receptionist Name' />
        </div>
    </div>

</div>

i Want it like this but in 1 ratio 3

1 Ответ

0 голосов
/ 30 апреля 2018

Хотя я согласен с комментариями о том, что вам следует провести хотя бы какое-то исследование, и это самый простой гибкий макет из всех, что он прост: добавьте display:flex в родительский div и добавьте flex: 1 и flex: 3 в компоненты.

Я отправляю вам рабочее решение по кодам и ящику https://codesandbox.io/s/wo6z1j23ll

...