Question

我试图安排选择组件及其标题水平但是不知何故无法正常工作3-4小时。为了详细说明，我使用以下代码来实现此功能：

＆＃13;

.horizontal {
  float: left;
  border: 1px solid green
}

.horizontal * {
  display: inline-block;
  margin-left: 10px;
}

＆＃13;

<div className="horizontal">
  <h3 className="section-heading">{this.props.label}</h3>
  <Select id="state-select" ref="stateSelect" autoFocus options={options} simpleValue clearable={this.state.clearable} name="selected-state" disabled={this.state.disabled} value={this.state.selectValue} onChange={this.updateValue} rtl={this.state.rtl} searchable={this.state.searchable}
  />
</div>

＆＃13;

Answer 1

CSS类的HTML属性为class而非className。您还需要style标记内的CSS。如果您还需要className，或者只是拥有这两个属性，或者在CSS中使用类似的内容：https://www.w3schools.com/css/css_attribute_selectors.asp

如果您只想使用className，只需将css中的.horizontal更改为[className=horizontal]即可。像这样（https://codepen.io/anon/pen/OOQrQm）：

<style>
[className=horizontal]{
    float: left;
    border: 1px solid green
}

[className=horizontal]  *{

    display: inline-block;
    margin-left: 10px;
}</style>
<div className="horizontal">
                <h3 className="section-heading">{this.props.label}</h3>
                <Select
                    id="state-select"
                    ref="stateSelect"
                    autoFocus
                    options={options}
                    simpleValue
                    clearable={this.state.clearable}
                    name="selected-state"
                    disabled={this.state.disabled}
                    value={this.state.selectValue}
                    onChange={this.updateValue}
                    rtl={this.state.rtl}
                    searchable={this.state.searchable}
                />
 </div>

Answer 2

试着看看这是否有效。

<div style={{display: "flex"}}>
    <h3 className="section-heading">{this.props.label}</h3>
    <div style={{width: "55%"}}>    
        <Select
            id="state-select"
            ref="stateSelect"
            autoFocus
            options={options}
            simpleValue
            clearable={this.state.clearable}
            name="selected-state"
            disabled={this.state.disabled}
            value={this.state.selectValue}
            onChange={this.updateValue}
            rtl={this.state.rtl}
            searchable={this.state.searchable}
        />
    </div>
</div>

我们如何水平安排反应选择标题和相应的组合框？

2 个答案: