使用填充将标签和输入字段放在同一行上

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为您处理样式，当您想要根据外部交互（例如服务器状态，用户输入等）操作样式时，可以提供更大的灵活性。

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

<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样式，但你需要camelCase属性。

React inline styles docs

然后在best practices上进行了一些进一步的讨论。

Answer 2

您只需将{{[style]}}更改为"[style]"即可。我不确定你用大括号做什么因为我不理解React.js（我假设它是React.js语法），但你可以简单地将样式放在引号中。

因此，以下一行：

<label style={{display: 'margin-right:10px'}}>Category</label>

应该只是：

<label style={{marginRight: '10px'}}>Category</label>

请参阅JSFiddle.net上的工作示例here（我夸大margin-right只是为了显示差异）。