javascript - 将标签和输入字段放在同一行，带填充

Question

我有一个标签和一个文本字段，我希望它们显示在同一行上。

我在这里查看了这个Label on the left side instead above an input field并将我的代码更改为使用 form-inline:

<div className="form-group form-inline">
    <label style={{display: 'margin-right:10px'}}>Category</label>
    <select className="form-control" value={this.state.selectCategoryValue} onChange={this.handleSelectCat} style={{display:'inline-block'}}>
        <option value="defaultCategory" disabled selected></option>
        {categoryDesc}
    </select>
</div>

但是，现在文本和输入字段之间没有填充，尽管我尝试设置 margin-right:

如何在它们之间添加一些填充？

Answer 1

@Jonathan 的回答会奏效，但这很可能不是您想要的。通过让 React 为您处理样式，当您想根据外部交互(例如服务器状态、用户输入等)操作样式时，可以提供更大的灵 active 。

在您的示例中，您可能希望使用以下内容:

<div className="form-group form-inline">
    <label style={{marginRight: '10px'}}>Category</label>
    <select className="form-control" value={this.state.selectCategoryValue} onChange={this.handleSelectCat} style={{display:'inline-block'}}>
        <option value="defaultCategory" disabled selected></option>
        {categoryDesc}
    </select>
</div>

基本上您可以使用任何 css 样式，但您需要对属性进行驼峰式命名。

React inline styles docs

然后这里有一些关于 best practices 的进一步讨论.