调用分页的时候竖着展示

迅睿框架更新 2022-11-18 14:20:50

明伦

这是全局搜索里面的分页出现这种问题需要在哪里调呢是什么问题呢

应用版权：第三方
应用名称：全站内容搜索

方案

YxiNing #1 · 2022-11-18 11:36:33

需要自己调css代码
零零云 #2 · 2022-11-18 11:36:55

是css样式问题。
鑫同学 #3 · 2022-11-18 11:38:45

自己根据需求改css样式就行了
无 #4 · 2022-11-18 11:40:07

自行调整下样式用的不是默认的样式，右键审查元素改下
匿名者 #5 · 2022-11-18 11:40:36

<span style="display:inline-bloc;padding:5px 5px;float:left">{$mypage}</span>加上这段试试，需要将页码浮动

帝云网络-长期接单 #6 · 2022-11-18 11:42:58

满意答案

样式问题，看我这个分享帖，拿来即用 https://www.xunruicms.com/wenda/54622.html

代码如下：

/*分页*/
<div class="pager">{$pages}</div>

1、有间隔CSS样式

/*分页*/
.pager {text-align: center; margin: 20px 0;}
.pager ul {display: flex; flex-wrap: wrap; justify-content: center}
.pager ul li {display: inline-block;}
.pager ul li a {padding: 5px 15px; margin: 15px 5px; border: #dddddd solid 1px; display: inline-block;}
.pager ul li a:hover {border: #3ea8e2 solid 1px; color: #3ea8e2}
.pager ul .active a {border: #3ea8e2 solid 1px; display: inline-block; background-color: #3ea8e2; color: #fff;}
.pager ul a:not([href]):not([class]):hover {border: #dddddd solid 1px;}
.pager ul .active a:hover {color: #fff; border: #3ea8e2 solid 1px !important;}

2、无间隔样式

/*分页*/
.pager {text-align: center; margin: 20px 0;}
.pager ul {display: flex; flex-wrap: wrap; justify-content: center}
.pager ul li {display: inline-block;}
.pager ul li a {padding: 5px 15px; border: #dddddd solid 1px; margin-left: -1px; display: inline-block;}
.pager ul li a:hover {border-color: #70c4f3; background-color: #70c4f3; color: #FFF}
.pager ul .active a {border: #3ea8e2 solid 1px; display: inline-block; background-color: #3ea8e2; color: #fff;}
.pager ul a:not([href]):not([class]):hover {border: #dddddd solid 1px; background-color: #fff}
.pager ul .active a:hover {color: #fff; border: #3ea8e2 solid 1px !important; background-color: #3ea8e2 !important}

淇云科技 #7 · 2022-11-18 11:45:36

让li元素float:left就好了
明伦 #8 · 2022-11-18 13:40:39

改好了这个下一页上一页是空白的要在那里改呢
明伦 #9 · 2022-11-18 14:20:50

@帝云网络-长期接单：已解决感谢