css - 对齐文本框和文本字段

Question

我想为我的 React 元素制作一个表单。我有一个文本和它对应的文本字段。我尝试使用 flexbox 但我没有做对。这是我的代码

 <div className="time-from-container">
                        <h4 style={styles.fontStyle}>From : </h4>
                        <TextField
                            id="time_in"
                         
                            underlineFocusStyle={{borderColor: '#293C8E'}}
                            floatingLabelFocusStyle={{color: '#293C8E'}}
                            style={{width: 120}}
                            value={this.secondsToHms(this.props.new_marker_reducer.start)}
                            floatingLabelText="Start Time"
                        />
                    </div>
                <div className="time-to-container">
                    <h4 style={styles.fontStyle} >To :</h4>
                    <TextField
                        id="time_out"
                       
                        underlineFocusStyle={{borderColor: '#293C8E'}}
                        floatingLabelFocusStyle={{color: '#293C8E'}}
                        style={{width: 120}}
                        value={this.secondsToHms(this.props.new_marker_reducer.end)}
                        floatingLabelText="End Time"
                    />
                </div>

我想像这样对齐

我应该怎么做？

Answer 1

你可以使用 flexbox 并给 h4 一个宽度

* {
  margin: 0;
}
div {
  display: flex;
  margin: 0 0 1em;
  align-items: center;
}
h4 {
  width: 80px;
}

<div>
  <h4>From: </h4>
  <input type="text">
</div>
<div>
  <h4>To: </h4>
  <input type="text">
</div>

或者您可以使用table 显示属性来模拟表格布局

* {
  margin: 0;
}
.parent {
  display: table;
}
.parent > div {
  display: table-row;;
}
h4,input {
  display: table-cell;
  margin: 0 0 1em;
}
h4 {
  padding-right: 1em;
}

<div class="parent">
  <div>
    <h4>From: </h4>
    <input type="text">
  </div>
  <div>
    <h4>To: </h4>
    <input type="text">
  </div>
</div>