移动端设计指南中 Navigation > Pagination > Button with text and icon 样式 bug

[littlemonkey19920204]

Version

1.2.0

Environment

OS X 10.11.2, Chrome 58

Reproduction link

https://mobile.ant.design/index-cn

Steps to reproduce

<div class="am-flexbox-item am-pagination-wrap-btn am-pagination-wrap-btn-prev">
<a role="button" class="am-button am-button-inline" aria-disabled="false">
<div class="arrow-align">
<svg class="am-icon am-icon-left am-icon-md">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#left"></use>
</svg>
<!-- react-text: 31 -->上一步<!-- /react-text -->
</div>
</a>
</div>

Above-mentioned codes got style problem as the screenshot pasted below：

What is expected?

• left arrow icon should be positioned in "Prev" button, and the icon should be center-align with the text
• right arrow icon got the same problem
• "Prev" button, pagination and "Next" button, these three elements should be center-aligned

What is actually happening?

• arrow icon is not positioned in button, and not aligned with text
• "Prev" button, pagination and "Next" button are not aligned

[ant-design-bot]

It will be better to write your issue/comment in English, so more people can understand you.
And this means that more people can help you or benefit from your issue/comment.
See: ant-design/ant-design#4897

[ant-design-bot]

Hello @littlemonkey19920204. Please provide a re-producible demo: http://codepen.io/paranoidjk/pen/LWpaKe

[paranoidjk]

The official demo look fine at my browser https://mobile.ant.design/index-cn.

Please provide a reproducible demo.

[littlemonkey19920204]

The official demo look fine at my browser https://mobile.ant.design/index-cn.

Please provide a reproducible demo.

@paranoidjk I visited the page with Chrome 58, and my desktop system is OS X 10.11.2. I just checked the page, still got layout problem with pagination as the screenshot shown below:

If the code looks fine, that might be a browser compatibility problem.

[warmhug]

选圈圈里选项就没问题了。
应该是页面宽度问题，scrollbar 占了宽度，需要修复。