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

Posted 2023-03-05

【中文标题】将标签和输入字段放在同一行，并带有填充

【英文标题】：Place label and input field on the same row, with padding

【发布时间】：2016-02-22 02:05:55

【问题描述】：

我想在同一行显示一个标签和一个文本字段。

我在这里查看了 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：

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

【问题讨论】：

尝试将标签设置为具有style="margin-right: 10px; display: inline-block;" 或让选择具有style="margin-left: 10px; display: inline-block;"

className 属性应为 class。

【参考方案1】：

您只需将[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 只是为了显示差异）。

【讨论】：

双花括号确实是jsx语法；它基本上是 jsx“占位符”内的标准 js 对象。

【参考方案2】：

@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 样式，但你需要对属性进行驼峰命名。

React inline styles docs

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