0

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

我想要这样，但比例为 1 3

4

1 回答 1

1

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

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

于 2018-04-29T21:35:11.863 回答