按 3:1 对齐标签和输入

Question

我在内部信息 class 中有输入和标签，我希望每个标签和输入在一行上按 1:3 对齐，无论屏幕尺寸是多少，而且我不会介意使用 flex classes，我只想要一个解决方案。干杯

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>

Answer 1

虽然我同意你至少应该做一些研究的评论，这是最简单的弹性布局，但它很简单，就像在父级 div 上添加 display:flex 并添加 flex: 1 和 flex: 3 在组件上。

我正在向您发送有关 codesandbox 的工作解决方案 https://codesandbox.io/s/wo6z1j23ll

按 3:1 对齐标签和输入

Aligning label and input by 3:1

reactjs

css

flexbox

react-native-flexbox