按 3:1 对齐标签和输入答案

【问题标题】：Aligning label and input by 3:1按 3:1 对齐标签和输入
【发布时间】：2018-10-09 21:56:19
【问题描述】：

我在 info 类内部有输入和标签，我希望每个标签和输入在单行上按 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>

【问题讨论】：

希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
我不推荐它......所以有关于它的规则......它会被检测到
这是一个公平的问题，我已经进行了研究。你不知道我在这里做了什么
嗨@SyedBaryalay，我的回答解决了你的问题吗？

标签： reactjs css flexbox react-native-flexbox

【解决方案1】：

虽然我同意 cmets 你应该至少做一些研究，这是最简单的 flex 布局，它很简单，只需在父 div 上添加 display:flex 并在组件上添加 flex: 1 和 flex: 3。

我正在向您发送有关代码沙盒的有效解决方案 https://codesandbox.io/s/wo6z1j23ll

【讨论】：