我似乎无法在同一行上同时获得日期和时间标签/输入。我尝试创建一个父div,然后将其设置为[display: inline-block]
,然后将两个输入都设置为display: block
,但是它并没有达到我想要的方式。有人可以指出我正确的方向。
// searchform.js
<div className="form__group">
<div className="form__dateTime">
<label htmlFor="date" className="form__labelDateTime"> Date </label>
{/*
Drop down calendar
*/}
<input type="text" name="date" className="form__input-date" placeholder=" mm/dd " />
</div>
</div>
<div className="form__group">
<div className="form__dateTime">
<label htmlFor="time" className="form__labelDateTime"> Time </label>
{/*
Possibly a drop menu for the times
*/}
<input type="text" name="date" className="form__input-time" placeholder="Time of departure" />
</div>
</div>
// _searchform.scss
&__dateTime{
display: inline-block;
}
&__labelDateTime{
display: block;
color: #474747;
font-weight: $default-font-weight;
font-size: 1.5rem;
margin-top: 1rem;
}
&__input-time, &__input-date{
font-size: $default-font-size;
padding: 1rem;
margin: 1.2rem 0;
width: 50%;
}