안녕하세요,
제목과 같이 검색과 글쓰기 버튼을 같은 줄에 넣으려고 합니다.
글쓰기 버튼을 아래와 같이 검색창으로 옮겨왔는데도 안되네요 ㅠㅠ..
<!-- 페이징 끝 -->
<!-- 검색폼 시작 -->
<div class="kboard-search">
<form id="kboard-search-form-<?php echo $board->id?>" method="get" action="<?php echo $url->toString()?>">
<?php echo $url->set('pageid', '1')->set('target', '')->set('keyword', '')->set('mod', 'list')->toInput()?>
<select name="target">
<option value=""><?php echo __('All', 'kboard')?></option>
<option value="title"<?php if(kboard_target() == 'title'):?> selected<?php endif?>><?php echo __('Title', 'kboard')?></option>
<option value="content"<?php if(kboard_target() == 'content'):?> selected<?php endif?>><?php echo __('Content', 'kboard')?></option>
<option value="member_display"<?php if(kboard_target() == 'member_display'):?> selected<?php endif?>><?php echo __('Author', 'kboard')?></option>
</select>
<input type="text" name="keyword" value="<?php echo esc_attr(kboard_keyword())?>">
<button type="submit" class="kboard-default-button-small"><?php echo __('Search', 'kboard')?></button>
<?php if($board->isWriter()):?>
<div>
<a href="<?php echo $url->getContentEditor()?>" class="kboard-default-button-small"><?php echo __('New', 'kboard')?></a>
</div>
<?php endif?>
</form>
</div>
<!-- 검색폼 끝 -->
<!-- 버튼 시작 -->
<!-- 버튼 끝 -->
안녕하세요~^^
<div> 태그는 block 속성으로 기본적으로 너비가 100%로 설정됩니다.
그렇기 때문에 글쓰기 버튼이 다음 줄에 표시되는 듯합니다.
추가하신 <div> 태그를 제거하고 확인해보시겠어요?
고맙습니다.
안녕하세요,
말씀하신대로 했더니 데스크탑에선 적용이 되지만 모바일에선 그대로 줄 바꿈이 되네요.
모바일에서도 줄바꿈이 되지 않도록 어떻게 설정해야 할까요? 감사합니다!
모바일은 비교적 표시될 너비가 좁기 때문에 검색 폼 너비도 조절을 해야 합니다.
아래 CSS 코드를 활용해보시겠어요?
@media screen and (max-width: 600px) {
#kboard-default-list .kboard-search input { width: 30%; min-width: 30%; }
#kboard-default-list .kboard-search button { width: auto; min-width: auto; }
}
위의 코드를 적용해도 같은 줄에 표시되지 않는다면 퍼센트를 줄여서 확인해보세요.
고맙습니다.