문제 : 너비가 아닌 div 블록의 가운데에 문제가 있습니다. 마지막 위치가 잘못된 div로 표시됩니다.

Question

This 질문 : "ul"=> align-center, "li"=> display : inline-block; 그러나 나는 그것이 어떻게 ul-li의 마지막 화살에 문제가되는지 이해하지 못한다.

사실 내가 사용 :

.pagination > li { 
    display: inline-block; 
} 

또한 centerPaginate는

text-align:center;

내가 노력이 FIDDLE을 확인하시기 바랍니다 있습니다.

감사합니다.

업데이트 : 나는 디스플레이를 사용합니다 : 인라인 - 플렉스,하지만 그것은 IE 9와 사파리, 다른 해결책으로 문제를 줍니까? 감사. 당신은 항상 display: inline-flex보다는 inline-block 사용할 수

Answer 1

...

.pagination > li { 
    display: inline-flex; 
} 

또는, vertical-align: top;.nxt 클래스에 추가 할 수 있습니다.

Answer 2

다음 예를 시도해보십시오. 난 그냥 왼쪽 화살표 버튼과 같은 오른쪽 화살표 버튼에 대한 구조를 넣어. 같은 <li> <a> abc </a> </li>

.pagination { 
 
    /* display: inline-block;*/ 
 
    display: block; 
 
    padding-left: 0; 
 
    margin: 20px 0; 
 
    border-radius: 4px; 
 
} 
 
.pagination > li { 
 
    display: inline-block; 
 
} 
 
.pagination > li > a, 
 
.pagination > li > span { 
 
    position: relative; 
 
    float: left; 
 
    padding: 6px 12px; 
 
    margin-left: -1px; 
 
    line-height: 1.428571429; 
 
    text-decoration: none; 
 
    background-color: #ffffff; 
 
    border: 1px solid #dddddd; 
 
    color: #282A2F; 
 
} 
 
.pagination > li:first-child > a, 
 
.pagination > li:first-child > span { 
 
    /* 
 
    margin-left: 0; 
 
    border-bottom-left-radius: 4px; 
 
    border-top-left-radius: 4px; 
 
    color:#fff; text-align:center; 
 
background: -webkit-linear-gradient(#5fd3d2, #32d9b6); background: -o-linear-gradient(#5fd3d2, #32d9b6); 
 
background: -moz-linear-gradient(#5fd3d2, #32d9b6); background: linear-gradient(#5fd3d2, #32d9b6); 
 
*/ 
 
} 
 
.pagination > li:last-child > a, 
 
.pagination > li:last-child > span { 
 
    border-top-right-radius: 4px; 
 
    border-bottom-right-radius: 4px; 
 
} 
 
.pagination > li > a:hover, 
 
.pagination > li > span:hover, 
 
.pagination > li > a:focus, 
 
.pagination > li > span:focus { 
 
    background-color: #eeeeee; 
 
} 
 
.pagination > .active > a, 
 
.pagination > .active > span, 
 
.pagination > .active > a:hover, 
 
.pagination > .active > span:hover, 
 
.pagination > .active > a:focus, 
 
.pagination > .active > span:focus { 
 
    z-index: 2; 
 
    color: #ffffff; 
 
    cursor: default; 
 
    background-color: #428bca; 
 
} 
 
.pagination > .disabled > span, 
 
.pagination > .disabled > a, 
 
.pagination > .disabled > a:hover, 
 
.pagination > .disabled > a:focus { 
 
    color: #999999; 
 
    cursor: not-allowed; 
 
    background-color: #ffffff; 
 
    border-color: #dddddd; 
 
} 
 
.pagination-lg > li > a, 
 
.pagination-lg > li > span { 
 
    padding: 10px 16px; 
 
    font-size: 18px; 
 
} 
 
.pagination-lg > li:first-child > a, 
 
.pagination-lg > li:first-child > span { 
 
    border-bottom-left-radius: 6px; 
 
    border-top-left-radius: 6px; 
 
} 
 
.pagination-lg > li:last-child > a, 
 
.pagination-lg > li:last-child > span { 
 
    border-top-right-radius: 6px; 
 
    border-bottom-right-radius: 6px; 
 
} 
 
.pagination-sm > li > a, 
 
.pagination-sm > li > span { 
 
    padding: 5px 10px; 
 
    font-size: 12px; 
 
} 
 
.pagination-sm > li:first-child > a, 
 
.pagination-sm > li:first-child > span { 
 
    border-bottom-left-radius: 3px; 
 
    border-top-left-radius: 3px; 
 
} 
 
.pagination-sm > li:last-child > a, 
 
.pagination-sm > li:last-child > span { 
 
    border-top-right-radius: 3px; 
 
    border-bottom-right-radius: 3px; 
 
} 
 
.pager { 
 
    padding-left: 0; 
 
    margin: 20px 0; 
 
    text-align: center; 
 
    list-style: none; 
 
} 
 
.pager:before, 
 
.pager:after { 
 
    display: table; 
 
    content: " "; 
 
} 
 
.pager:after { 
 
    clear: both; 
 
} 
 
.pager:before, 
 
.pager:after { 
 
    display: table; 
 
    content: " "; 
 
} 
 
.pager:after { 
 
    clear: both; 
 
} 
 
.pager li { 
 
    display: inline; 
 
} 
 
.pager li > a, 
 
.pager li > span { 
 
    display: inline-block; 
 
    padding: 5px 14px; 
 
    background-color: #ffffff; 
 
    border: 1px solid #dddddd; 
 
    border-radius: 15px; 
 
} 
 
.pager li > a:hover, 
 
.pager li > a:focus { 
 
    text-decoration: none; 
 
    background-color: #eeeeee; 
 
} 
 
.pager .next > a, 
 
.pager .next > span { 
 
    float: right; 
 
} 
 
.pager .previous > a, 
 
.pager .previous > span { 
 
    float: left; 
 
} 
 
.pager .disabled > a, 
 
.pager .disabled > a:hover, 
 
.pager .disabled > a:focus, 
 
.pager .disabled > span { 
 
    color: #999999; 
 
    cursor: not-allowed; 
 
    background-color: #ffffff; 
 
} 
 
/*new attr*/ 
 

 
li.prev, 
 
li.next { 
 
    float: none!important; 
 
}

<ul class="pagination centerPaginate"> 
 
    <li class="prev"><a href="/smudev/CourseCategories/index/reset:true" rel="prev"> &lt;&lt; </a> 
 
    </li> 
 
    <li><a href="/smudev/CourseCategories/index/reset:true">1</a> 
 
    </li> 
 
    <li class="active"><a>2</a> 
 
    </li> 
 
    <li class="disabled next"><a href="/smudev/CourseCategories/index/reset:true" rel="prev"> &gt;&gt; </a> 
 
    </li> 
 
</ul>