Question

我有两个输入字段，我希望在同一行上呈现。目前，他们看起来像这样：

我看了其他问题，例如： How to align two elements on the same line without changing HTML。因此，我尝试在代码中使用{display:'inline-block'}和'margin-right:10px'。

但是，元素仍然不会出现在同一行中。

我的完整代码：

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

如何将组件放在同一行？

Answer 1

这里有一个工作小提琴：

https://jsfiddle.net/t5km2jjp/

看起来你的第一个风格attr是错误的元素，应该在下面的div上。此外，样式标记作为属性的格式为style="display: inline-block;"

<div>
    <div className="form-group" style="display: inline-block;">
        <label>Category</label>
        <br/>
        <select className="form-control" value={this.state.selectCategoryValue} onChange={this.handleSelectCat}>
            <option value="defaultCategory" disabled selected></option>{categoryDesc}</select>
    </div>
    <div className="form-group" style="display: inline-block">
        <label>Classification</label>
        <br/>
        <select className="form-control" value={this.state.selectClassificationValue} onChange={this.handleSelectClass}>
            <option value="defaultClassification" disabled selected></option>{this.state.classificationDesc}</select>
    </div>
</div>

看起来代码中还有一些其他问题，但这解决了您要问的这个问题。

Answer 2

您已将display: inline-block添加到父div。这将导致父div显示为内联。

您要完成的是显示内联子div。如果您将样式规则display: inline-block添加到它们中，那么一切都应该可以正常工作。

示例：

#parent-1 #child {
  display: inline-block;
}

<!--Example with display: inline-block-->
<div id="parent-1">
  <div id="child">
    Child 1:
    <input type="text" />
  </div>
  <div id="child">
    Child 2:
    <input type="text" />
  </div>
</div>

<hr/>
<!--Example without display: inline-block-->

<div id="parent-2">
  <div id="child">
    Child 1:
    <input type="text" />
  </div>
  <div id="child">
    Child 2:
    <input type="text" />
  </div>
</div>

强制字段显示在同一行上

2 个答案: