[CSS] pagination과 버튼 나란히 두기

<div style="float:right;">
            <a type="button" class="btn btn-primary" th:href="@{/post/new}">쓰기</a>
        </div>
        <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-center" style="margin-top:0;">
                <li class="page-item" th:classappend="${1==post.pageable.pageNumber+1}? 'disabled'">
                    <a class="page-link" th:href="@{/post(page=${post.pageable.pageNumber-1})}" tabindex="-1" aria-disabled="true">Previous</a>
                </li>
                <li class="page-item" th:classappend="${i==post.pageable.pageNumber+1}? 'disabled'" th:each="i : ${#numbers.sequence(start, end)}"><a class="page-link" th:href="@{/post(page=${i-1})}" th:text="${i}">1</a></li>
                <li class="page-item" th:classappend="${post.totalPages==post.pageable.pageNumber+1}? 'disabled'">
                    <a class="page-link" th:href="@{/post(page=${post.pageable.pageNumber+1})}">Next</a>
                </li>
            </ul>
        </nav>

ul 태그에 margin-top:0을 줬다.

쓰기 버튼이 페이지네이션보다 밑에 있으면 두 개를 수평으로 두는 게 안 된다.

쓰기 버튼을 감싸고 있는 div 태그는 블록레벨이기 때문에 한 행을 혼자 다 차지한다.

 

 

참고 👉

https://stackoverflow.com/questions/19768389/bootstrap-alignment-of-button-and-pagination

Bootstrap alignment of button and pagination