Explore my side projects and work using this link

Upsidedown is a WordPress theme design that brings blog posts rising above inverted header and footer components.

Advertisements

왜인지 모르지만 체크박스가 수직 정렬이 잘 안맞아서 글자랑 비뚤삐뚤 하네.

일단 결론적으로 이렇게 맞추었다. CSS의 남발인지 모르지만

소스 코드라고 할껀 없지만, 일단 올려둔다.
<div class="row mb-1 text-nowrap">
    <div class="col-auto d-flex align-items-center">
        <label class="form-label text-primary">기간별 검색 | </label>
        <label class="form-label" for="s_date_field">기간조건</label>
        <div class="form-check form-check-inline m-0 p-0 d-flex align-items-center">
            <input class="form-check-input m-0" type="radio" name="s_do" id="dateRadios0_1" value="option0_1" {% if s_context.s_do == "" or s_context.s_do == "option0_1" %}checked{% endif %}>
            <label class="form-check-label m-0 mx-1" for="dateRadios0_1">올해</label>
        </div>
        <div class="form-check form-check-inline m-0 p-0 d-flex align-items-center">
            <input class="form-check-input m-0" type="radio" name="s_do" id="dateRadios0" value="option0" {% if s_context.s_do == "option0" %}checked{% endif %}>
            <label class="form-check-label m-0 mx-1" for="dateRadios0">전체</label>
        </div>
        <div class="form-check form-check-inline m-0 p-0 d-flex align-items-center">
            <input class="form-check-input m-0" type="radio" name="s_do" id="dateRadios2" value="option2" {% if s_context.s_do == "option2" %}checked{% endif %}>
            <label class="form-check-label m-0 mx-1" for="dateRadios2">오늘</label>
        </div>
        <div class="form-check form-check-inline m-0 p-0 d-flex align-items-center">
            <input class="form-check-input m-0" type="radio" name="s_do" id="dateRadios1" value="option1" {% if s_context.s_do == "option1" %}checked{% endif %}>
            <label class="form-check-label m-0 mx-1" for="dateRadios1">-1주</label>
        </div>
        <div class="form-check form-check-inline m-0 p-0 d-flex align-items-center">
            <input class="form-check-input m-0" type="radio" name="s_do" id="dateRadios4" value="option4" {% if s_context.s_do == "option4" %}checked{% endif %}>
            <label class="form-check-label m-0 mx-1" for="dateRadios4">전월</label>
        </div>
        <div class="form-check form-check-inline m-0 p-0 d-flex align-items-center">
            <input class="form-check-input m-0" type="radio" name="s_do" id="dateRadios5" value="option5" {% if s_context.s_do == "option5" %}checked{% endif %}>
            <label class="form-check-label m-0 mx-1" for="dateRadios5">당월</label>
        </div>
        <div class="form-check form-check-inline m-0 ms-2 p-0 d-flex align-items-center">
            <input class="form-check-input m-0" type="radio" name="s_do" id="dateRadios7" value="option7" {% if s_context.s_do == "option7" %}checked{% endif %}>
            <label class="form-check-label m-0 mx-1" for="dateRadios7">기간설정</label>
        </div>
        <input type="date" name="s_df" id="id_s_df" value="{{ s_context.s_df }}" class="form-control">
        <span> ~ </span>
        <input type="date" name="s_dt" id="id_s_dt" value="{{ s_context.s_dt }}" class="form-control">
    </div>
</div>

d-flex align-items-center 이거의 남발일수 있지만

마진 이나 패팅을 0으로 만들고 억지로 끼워맞춘 느낌이지만 머 잘 보이면 되지

Advertisements