테스트 사이트 - 개발 중인 베타 버전입니다

버튼의 위치가 이상해요. 채택완료

7개월 전 조회 2,688

안녕하세요? 검색 버튼이 검색어 입력박스보다 아래에 배치 되어 버리네요 모바일 화면에서요 pc화면은 괜찮아요.

 

http://sir.kr/data/editor/2505/2943771738_1746870460.0023.png" />

간련 CSS 코드입니다. 검색 버튼 글자로 가로정렬에서 가운데 정렬이 안되요~

뭘 고쳐야 하는지요?

</p>

<p>.search-form .form-group {

        flex-direction: row;

        flex-wrap: wrap;

        align-items: flex-start; /* 위쪽 정렬 유지 */

    }

    .search-form .form-group select {

        width: 90px;

        margin-right: 3px;

        height: 34px;

        padding: 6px;

    }

    .search-form .form-group input {

        width: 140px;

        margin-right: 3px;

        height: 34px;

        padding: 6px;

    }

    .search-form .form-group button {

        width: 60px;

        padding: 6px 6px;

        margin-right: 0;

        white-space: nowrap;

        height: 34px;

        text-align: center; /* 모바일에서도 버튼 텍스트를 가운데 정렬 */

    }

    .table-box {

        overflow-x: auto;

        white-space: nowrap;

    }

    .pagination {

        flex-direction: row;

        flex-wrap: nowrap;

    }

    .pagination a {

        display: inline-block;

        margin: 5px;

        font-size: 12px;

    }

}</p>

<p>

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트

간단하게 구성해봤을때 그런 문제는 없는것 같습니다.

</p>

<p><style>

.search-form .form-group {

        flex-direction: row;

        flex-wrap: wrap;

        align-items: flex-start; /* 위쪽 정렬 유지 */

    }

    .search-form .form-group select {

        width: 90px;

        margin-right: 3px;

        height: 34px;

        padding: 6px;

    }

    .search-form .form-group input {

        width: 140px;

        margin-right: 3px;

        height: 34px;

        padding: 6px;

    }

    .search-form .form-group button {

        width: 60px;

        padding: 6px 6px;

        margin-right: 0;

        white-space: nowrap;

        height: 34px;

        text-align: center; /* 모바일에서도 버튼 텍스트를 가운데 정렬 */

    }

    .table-box {

        overflow-x: auto;

        white-space: nowrap;

    }

    .pagination {

        flex-direction: row;

        flex-wrap: nowrap;

    }

    .pagination a {

        display: inline-block;

        margin: 5px;

        font-size: 12px;

    }

/*}*/

</style></p>

<p><form class="search-form">

    <fieldset class="form-group">

        <select>

            <option>검색항목</option>

        </select>

        <input type="text" placeholder="검색어 입력">

        <button type="button">검색</button>

    </fieldset>

</form></p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

<button type="button">검색</button> 일때는 이상이 없고
<button type="submit">검색</button> 일때가 질문한 그림과 같이 되네요

button 으로 하는 경우, 폼이 동작-검색이 되지 않네요.
검색이 되게 하는 방법이 있나요?
<button type="submit">검색</button> 으로 구성해도 그런 문제는 없는것 같습니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인

전체 질문 목록

🐛 버그신고