버튼의 위치가 이상해요.
본문
안녕하세요? 검색 버튼이 검색어 입력박스보다 아래에 배치 되어 버리네요
모바일 화면에서요 pc화면은 괜찮아요.
간련 CSS 코드입니다.
검색 버튼 글자로 가로정렬에서 가운데 정렬이 안되요~
뭘 고쳐야 하는지요?
.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;
}
}
답변 1
간단하게 구성해봤을때 그런 문제는 없는것 같습니다.
<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>
<form class="search-form">
<fieldset class="form-group">
<select>
<option>검색항목</option>
</select>
<input type="text" placeholder="검색어 입력">
<button type="button">검색</button>
</fieldset>
</form>
<button type="button">검색</button> 일때는 이상이 없고
<button type="submit">검색</button> 일때가 질문한 그림과 같이 되네요
button 으로 하는 경우, 폼이 동작-검색이 되지 않네요.
검색이 되게 하는 방법이 있나요?
<button type="submit">검색</button> 으로 구성해도 그런 문제는 없는것 같습니다.
답변을 작성하시기 전에 로그인 해주세요.
