设为首页收藏本站

jQuery MiniUI

 找回密码
 立即注册
jQuery MiniUI › 论坛 › MiniUI › 技术交流 › 受滚动条影响，布局按钮居中问题
返回列表 发新帖
查看: 1174|回复: 1
打印 上一主题 下一主题

受滚动条影响，布局按钮居中问题 [复制链接]

pxl2014

Rank: 3Rank: 3
跳转到指定楼层
楼主
发表于 2017-1-6 18:34:28 |只看该作者 |倒序浏览
页面数据过少时，无滚动条

页面数据达到滚动效果时




要如何处理，才能使得没有滚动条时按钮也能居中显示




<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>按钮分配</title>
    <script src="../../skins/js/miniui_net v3.7/scripts/boot.js" type="text/javascript"></script>
    <style type="text/css">
        .btn_All {
            float: left;
            width: 450px;
            height: 527px;
        }

            .btn_All ul {
                list-style: none;
                margin: 0;
                padding: 0;
                border: none;
            }

                .btn_All ul li {
                    float: left;
                    width: 80px;
                    height: 79px;
                    margin: 4px 4px;
                    border: 1px solid #333;
                }

        .btn_XZ {
            float:left;
            width: 76px;
            text-align: center;
            vertical-align:middle;
        }

        .btn_My {
            float: right;
            width: 450px;
            height: 527px;
            border: 1px solid #333;
        }

            .btn_My ul {
                list-style: none;
                margin: 0;
                padding: 0;
                border: none;
            }

                .btn_My ul li {
                    float: left;
                    width: 80px;
                    height: 79px;
                    margin: 4px 4px;
                    border: 1px solid #333;
                }
    </style>
</head>
<body>
    <div class="mini-fit">
        <div class="btn_All">
            <ul>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
            </ul>
        </div>
        <div class="btn_XZ">
            <a class="mini-button" style="width: 60px;">添加>></a><br />
            <a class="mini-button" style="width: 60px;">删除<<</a>
        </div>
        <div class="btn_My">
            <ul>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
                <li class="btnList"></li>
            </ul>
        </div>
    </div>
    <div class="mini-toolbar" style="text-align: center; padding-top: 4px; padding-bottom: 4px;"
        borderstyle="border-left:0;border-bottom:0;border-right:0;">
        <a class="mini-button" style="width: 60px;">确定</a>
        <span style="display: inline-block; width: 25px;"></span>
        <a class="mini-button" style="width: 60px;">取消</a>
    </div>
</body>
</html>
<script type="text/javascript">
    mini.parse();
</script>

附件: 你需要登录才可以下载或查看附件。没有帐号？立即注册

举报

dforce

Rank: 8Rank: 8
沙发
发表于 2017-1-9 09:33:38 |只看该作者
你这布局并不能居中
附件: 你需要登录才可以下载或查看附件。没有帐号？立即注册

举报

返回列表 发新帖

Archiver|普加软件

GMT+8, 2024-7-1 01:00 , Processed in 1.060458 second(s), 11 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部