jQuery MiniUI
标题:
受滚动条影响,布局按钮居中问题
[打印本页]
作者:
pxl2014
时间:
2017-1-6 18:34:28
标题:
受滚动条影响,布局按钮居中问题
页面数据过少时,无滚动条
[attach]8702[/attach]
页面数据达到滚动效果时
[attach]8703[/attach]
要如何处理,才能使得没有滚动条时按钮也能居中显示
<!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
时间:
2017-1-9 09:33:38
[attach]8705[/attach]你这布局并不能居中
欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)
Powered by Discuz! X2