输入标签和标签标签在同一行

时间:2019-06-21 01:42:09

标签: html css reactjs sass

我似乎无法在同一行上同时获得日期和时间标签/输入。我尝试创建一个父div,然后将其设置为[display: inline-block],然后将两个输入都设置为display: block,但是它并没有达到我想要的方式。有人可以指出我正确的方向。

enter image description here

// 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%;
    }

0 个答案:

没有答案