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

我有一个标签和一个文本字段，我想要在同一行上显示。将标签和输入字段放在同一行上，并使用填充

我这里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：

我该如何在它们之间添加填充？

来源

2015-11-19 octavian

尝试设置标签为'style =“margin-right：10px; display：inline-block;”'或让select具有'style =“margin-left：10px; display：inline-block;” ' – Aeolingamenfel

看起来是一样的 – octavian

'className'属性应该是'class'。 –

您所要做的就是将{{[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只是以示区别）。

来源

2015-11-19 19:59:52

双括号确实是jsx语法;它基本上是一个jsx'占位符'内的标准js对象。 – Clarkie

@FakeRainBrigand感谢您的编辑。 –

@Clarkie感谢您的评论。 –

@乔纳森的答案将工作，但这可能不是你所追求的。通过让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样式，但你需要驼峰财产。

React inline styles docs

有那么一些进一步的讨论在这里best practices。

来源

2015-11-20 07:35:11 Clarkie

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

回答

相关问题