Question

我想为我的反应项目制作一个表单。我有一个文本，它是相应的文本字段。我尝试过使用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提供宽度

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

.time-from-container h4, .time-to-container h4 {
    display:inline-block;
    width:90px;
}

对齐文本框和文本字段

2 个答案: