如何将表单与 flexbox 对齐？

Question

我想像前两个输入（房间、游客）一样对齐所有表单输入。 （相同宽度） 我使用了 flexbox，但它只适用于这两个元素，而其他元素则不行。 我对其他输入的前两个输入做了相同的样式，但它不起作用。 按钮也包括在 flex 中，就像输入一样。 每行包含两个输入。 这是我的反应代码：

render() {
    return <div className='device-form'>
      <div className="device-header">Device IMEI: {this.state.device.imei}</div>
      <div className="device-inputs">
        <div>
          <label>Room:</label>
          <select onChange={e => this.setState({ room_id: e.target.value })}>
            <option selected disabled hidden>Room</option>
            {this.state.rooms.map(x => <option value={x.id}>
              {'Room ' + x.room_number + ' Section: ' + x.section + ' / Floor: ' + x.floor}
            </option>)}
          </select>
        </div>
        <div>
          <label>Tourist:</label>
          <select onChange={e => this.setState({ tourist_id: e.target.value })}>
            <option selected disabled hidden>Tourist</option>
            {this.state.tourists.map(x => <option value={x.id}>
              {x.first_name + ' ' + x.last_name}
            </option>)}
          </select>
        </div>
        {(this.context.role == 3) ? <div>
          <label htmlFor="imei">IMEI:</label>
          <input defaultValue={this.state.device.imei} id="imei" onInput={e => this.setState({ imei: e.target.value })} />
          <label htmlFor="call_time">Call Time:</label>
          <input defaultValue={this.state.device.call_time} id="call_time" onInput={e => this.setState({ call_time: e.target.value })} />
          <label htmlFor="call_limit">Call Limit:</label>
          <input defaultValue={this.state.device.call_limit} id="call_limit" onInput={e => this.setState({ call_limit: e.target.value })} />
          <label htmlFor="intra_flotte">Intra Flotte:</label>
          <select name="intra_flotte" onInput={e => this.setState({ intra_flotte: e.target.value })}>
            <option selected disabled hidden>Intra Flotte?</option>
            <option value="0">No</option>
            <option value="1">Yes</option>
          </select>
        </div> : null}
      </div>
      <button onClick={this.edit}>Confirm</button>
    </div>;
  }

sass 文件：

@import '../../../assets/var';
/*
  Device edit style
  .
  .
  .
  .
  .
  .

*/



.device-form{
  width: 100%;
  // height: 230px;
  background-color: #e5e5e5;
  border-radius: 5px;

}

.device-form .device-header{
  width: 100%;
  background-color: $hellodati-blue;
  height: 50px;
  box-sizing: border-box;
  border-radius: 5px;
  padding:20px;
  color: white;
}

.device-form select{
  width: 100%;
  height: 40px;
  border-radius: 5px;
}

.device-form input{
  width: 100%;
  height: 40px;
  border: 1px solid gray;
  box-sizing: border-box;
  // margin: 1%;
  padding: 1%;
  border-radius: 5px;
}


.device-inputs div{
  margin-left: 20px;
  display: inline-flex;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  flex-flow: column;
  margin-bottom: 20px;
  width: 45%;
  align-items: flex-start;
}

.device-inputs label{
  margin-bottom: 20px;
}

.device-form button{
  margin-bottom: 20px;
  margin-left: 20px;
  padding: 10px;
  border-radius: 50px;
  border: none;
  background-color: $restaurant-blue;
  color: white;
}

这是当前状态： https://ibb.co/6RmpTzY

Answer 1

我的理解是，您希望将 [select] 元素下方的输入设置为每行并排 2，

您将所有输入都放在一个宽度为 45% 的（flex-column）div 中，这将导致所有输入都位于彼此顶部的一侧（左侧）。

解决问题：您只需将每个 [label/input] 对添加到单独的 div 中

用这个sn-p替换输入部分

        <>
          <div>
            <label htmlFor="imei">IMEI:</label>
            <input
              defaultValue={this.state.device.imei}
              id="imei"
              onInput={e => this.setState({ imei: e.target.value })}
            />
          </div>
          <div>
            <label htmlFor="call_time">Call Time:</label>
            <input
              defaultValue={this.state.device.call_time}
              id="call_time"
              onInput={e => this.setState({ call_time: e.target.value })}
            />
          </div>
          <div>
            <label htmlFor="call_limit">Call Limit:</label>
            <input
                defaultValue={this.state.device.call_limit}
              id="call_limit"
              onInput={e => this.setState({ call_limit: e.target.value })}
            />
          </div>
          <div>
            <label htmlFor="intra_flotte">Intra Flotte:</label>
            <select
              name="intra_flotte"
              onInput={e => this.setState({ intra_flotte: e.target.value })}
            >
              <option selected disabled hidden>
                Intra Flotte?
              </option>
              <option value="0">No</option>
              <option value="1">Yes</option>
            </select>
          </div>
        </>