我在一个容器内的网格中使用jQuery移动按钮（为了简洁起见，容器还需要一个我从显示的代码中删除的地图。）
我只需要2列网格中的29个按钮，因此最大行数为15。
然而，网格似乎自动设置为16行，我不明白为什么。
JSfiddle是： https://jsfiddle.net/everare/uqkds374/
代码：
<DOCTYPE html />
<html>
<head>
<!-- CSS file -->
<!--JQuery links-->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!--Link to google fonts-->
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css' />
<link href='http://ufonts.com/fonts/samarkan-normal.html' rel='stylesheet' type='text/css'>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<!--Style Body, Container, Box one-->
<style type="text/css">
body {
background-color: white;
background-repeat: no-repeat;
background-position: 0px 0px;
}
.container {
position: absolute;
top: 140px;
left: 60px;
border: 0px;
height: 600px;
width: 1100px;
align-content: space-between;
justify-content: space between;
margin: 50px background-color: #34495e;
}
div.boxOne {
position: absolute;
top: 70px;
left: 0px;
margin: 0px;
border: 10px solid black;
border-color: black;
Width: 415px;
Height: 510px;
color: white;
}
div.boxTwo {
position: absolute;
top: 0px;
left: 0px;
margin: 0px;
border: 8px solid black;
border-color: black;
background-color: black;
Width: 415px;
Height: 60px;
}
.ui-content {
padding: 2px 2px;
margin-bottom: 0px !important;
margin-left: 0 !important;
line-height: 0px;
color: white;
text-align: left;
vertical-align: middle;
cursor: pointer;
background-color: black;
}
.ui-btn-f {
color: black;
overflow: visible;
padding-left: 0px !important;
padding-right: 0px !important;
margin-bottom: 0px !important;
margin-top: 0px !important;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
background: black;
background-color: black !important;
border: none;
}
.ui-btn-text {
font-weight: bold;
font-family: Montserrat;
text-shadow: 0 0px 0 #000;
font-size: 15px;
color: white;
}
h3 {
font-weight: bold;
font-family: Montserrat;
text-shadow: 0 0px 0 #000;
font-size: 30px;
color: white;
text-align: center;
vertical-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="boxTwo">
<h3>
Indian states
</h3>
</div>
<div class="boxOne">
<div data-role="page" id="pageone">
<div class="ui-grid-a">
<div class="ui-block-a">
<!--Panel for AP-->
<div data-role="panel" id="myPanel1">
<h2>Andhra pradesh</h2>
<a href="#mypageone" data-rel="close">Close panel</a>
<p>Facts about AP</p>
</div>
<div data-role="main" class="ui-content">
<a href="#myPanel1" class="ui-btn ui-btn-f"><span class="ui-btn-text">Andhra pradesh</span></a>
</div>
<!--Panel for AR P-->
<div data-role="panel" id="myPanel2">
<h2>Arunachal Pradesh</h2>
<a href="#mypageone" data-rel="close">Close</a>
<p>Facts about Arunachal Pradesh</p>
</div>
<div data-role="main" class="ui-content">
<a href="#myPanel2" class="ui-btn ui-btn-f"><span class="ui-btn-text">Arunachal Pradesh</span></a>
</div>
<!--End panel-->
<!--Panel for AS-->
<div data-role="panel" id="myPanel3">
<h2>Assum</h2>
<a href="#mypageone" data-rel="close">Close</a>
<p>Facts about Assum</p>
</div>
<div data-role="main" class="ui-content">
<a href="#myPanel3" class="ui-btn ui-btn-f"><span class="ui-btn-text">Assum</span></a>
</div>
<!--End panel-->
<!--Panel for BI-->
<div data-role="panel" id="myPanel4">
<h2>Bihar</h2>
<a href="#mypageone" data-rel="close">Close</a>
<p>Facts about Bihar</p>
</div>
<div data-role="main" class="ui-content">
<a href="#myPanel4" class="ui-btn ui-btn-f"><span class="ui-btn-text">Bihar</span></a>
</div>
<!--End panel-->
<!--Panel for CH-->
<div data-role="panel" id="myPanel5">
<h2>Chhattisgarh</h2>
<a href="#mypageone" data-rel="close">Close</a>
<p>Facts about Chhattisgarh</p>
</div>
<div data-role="main" class="ui-content">
<a href="#myPanel5" class="ui-btn ui-btn-f"><span class="ui-btn-text">Chhattisgarh</span></a>
</div>
<!--End panel-->
<!--Panel for GO-->
<div data-role="panel" id="myPanel6">
<h2>Goa</h2>
<a href="#mypageone" data-rel="close">Close</a>
<p>Facts about Goa</p>
</div>
<div data-role="main" class="ui-content">
<a href="#myPanel6" class="ui-btn ui-btn-f"><span class="ui-btn-text">Goa</span></a>
</div>
<!--End panel-->
<!--Panel for GU-->
<div data-role="panel" id="myPanel7">
<h2> Gujarat</h2>
<a href="#mypageone" data-rel="close">Close</a>
<p>Facts about Gujarat</p>
</div>
<div data-role="main" class="ui-content">
<a href="#myPanel7" class="ui-btn ui-btn-f"><span class="ui-btn-text">Gujarat</span></a>
</div>
<!--End panel-->
<!--Panel for HA-->
<div data-role="panel" id="myPanel8">
<h2>Haryana</h2>
<a href="#mypageone" data-rel="close">Close</a>
<p>Facts about Haryana</p>
</div>
<div data-role="main" class="ui-content">
<a href="#myPanel8" class="ui-btn ui-btn-f"><span class="ui-btn-text">Haryana</span></a>
</div>
<!--End panel-->
<!--Panel for HA-->
<div data-role="panel" id="myPanel9">
<h2>Himachal Pradesh</h2>
<a href="#mypageone" data-rel="close">Close</a>
<p>Facts about Himachal Pradesh</p>
</div>
<div data-role="main" class="ui-content">
<a href="#myPanel9" class="ui-btn ui-btn-f"><span class="ui-btn-text">Himachal Pradesh</span></a>
</div>
<!--End panel-->
<!--Panel for JK-->
<div data-role="panel" id="myPanel10">
<h2>Jammu and Kashmir</h2>
<a href="#mypageone" data-rel="close">Close</a>
<p>Facts about Jammu and Kashmir</p>
</div>
<div data-role="main" class="ui-content">
<a href="#myPanel10" class="ui-btn ui-btn-f"><span class="ui-btn-text">Jammu and Kashmir</span></a>
</div>
<!--End panel-->
<!--Panel for JH-->
<div data-role="panel" id="myPanel11">
<h2>Jharkhand </h2>
<a href="#mypageone" data-rel="close">Close</a>
<p>Facts about Jharkhand </p>
</div>
<div data-role="main" class="ui-content">
<a href="#myPanel11" class="ui-btn ui-btn-f"><span class="ui-btn-text">Jharkhand</span></a>
</div>
<!--End panel-->
<!--Panel for KA-->
<div data-role="panel" id="myPanel12">
<h2>Karnataka</h2>
<a href="#mypageone" data-rel="close">Close</a>
<p>Facts about Karnataka</p>
</div>
<div data-role="main" class="ui-content">
<a href="#myPanel12" class="ui-btn ui-btn-f"><span class="ui-btn-text">Karnataka</span></a>
</div>
<!--End panel-->
<!--Panel for KE-->
<div data-role="panel" id="myPanel13">
<h2>Kerala </h2>
<a href="#mypageone" data-rel="close">Close</a>
<p>Facts about Kerala </p>
</div>
<div data-role="main" class="ui-content">
<a href="#myPanel13" class="ui-btn ui-btn-f"><span class="ui-btn-text">Kerala </span></a>
</div>
<!--End panel-->
<!--Panel for MP-->
<div data-role="panel" id="myPanel14">
<h2>Madhya Pradesh</h2>
<a href="#mypageone" data-rel="close">Close</a>
<p>Facts about Madhya Pradesh </p>
</div>
<div data-role="main" class="ui-content">
<a href="#myPanel14" class="ui-btn ui-btn-f"><span class="ui-btn-text">Madhya Pradesh</span></a>
</div>
<!--End panel-->
</div>
<div class="ui-block-b">
<!--Panel for MA-->
<div data-role="panel" id="myPanel15">
<h2>Maharashtra</h2>
<a href="#mypageone" data-rel="close">Close</a>
<p>Facts about Maharashtra </p>
</div>
<div data-role="main" class="ui-content">
<a href="#myPanel15" class="ui-btn ui-btn-f"><span class="ui-btn-text">Maharashtra</span></a>
</div>
<!--End panel-->
<!--Panel for MAN-->
<div data-role="panel" id="myPanel16">
<h2>Manipur</h2>
<a href="#mypageone" data-rel="close">Close</a>
<p>Facts about Manipur </p>
</div>
<div data-role="main" class="ui-content">
<a href="#myPanel16" class="ui-btn ui-btn-f"><span class="ui-btn-text">Manipur</span></a>
</div>
<!--End panel-->
<!--Panel for ME-->
<div data-role="panel" id="myPanel17">
<h2>Meghalaya</h2>
<a href="#mypageone" data-rel="close">Close</a>
<p>Facts about Meghalaya </p>
</div>
<div data-role="main" class="ui-content">
<a href="#myPanel17" class="ui-btn ui-btn-f"><span class="ui-btn-text">Meghalaya</span></a>
</div>
<!--End panel-->
<!--Panel for MI-->
<div data-role="panel" id="myPanel18">
<h2>Mizoram</h2>
<a href="#mypageone" data-rel="close">Close</a>
<p>Facts about Mizoram </p>
</div>
<div data-role="main" class="ui-content">
<a href="#myPanel18" class="ui-btn ui-btn-f"><span class="ui-btn-text">Mizoram</span></a>
</div>
<!--End panel-->
<!--Panel for NA-->
<div data-role="panel" id="myPanel19">
<h2>Nagaland</h2>
<a href="#mypageone" data-rel="close">Close</a>
<p>Facts about Nagaland </p>
</div>
<div data-role="main" class="ui-content">
<a href="#myPanel19" class="ui-btn ui-btn-f"><span class="ui-btn-text">Nagaland</span></a>
</div>
<!--End panel-->
<!--Panel for OD-->
<div data-role="panel" id="myPanel20">
<h2>Odisha</h2>
<a href="#mypageone" data-rel="close">Close</a>
<p>Facts about Odisha </p>
</div>
<div data-role="main" class="ui-content">
<a href="#myPanel20" class="ui-btn ui-btn-f"><span class="ui-btn-text">Odisha</span></a>
</div>
<!--End panel-->
<!--Panel for PU-->
<div data-role="panel" id="myPanel21">
<h2>Punjab</h2>
<a href="#mypageone" data-rel="close">Close</a>
<p>Facts about Punjab </p>
</div>
<div data-role="main" class="ui-content">
<a href="#myPanel21" class="ui-btn ui-btn-f"><span class="ui-btn-text">Punjab</span></a>
</div>
<!--End panel-->
<!--Panel for RA-->
<div data-role="panel" id="myPanel22">
<h2>Rajasthan</h2>
<a href="#mypageone" data-rel="close">Close</a>
<p>Facts about Rajasthan </p>
</div>
<div data-role="main" class="ui-content">
<a href="#myPanel22" class="ui-btn ui-btn-f"><span class="ui-btn-text">Rajasthan</span></a>
</div>
<!--End panel-->
<!--Panel for SI-->
<div data-role="panel" id="myPanel23">
<h2>Sikkim</h2>
<a href="#mypageone" data-rel="close">Close</a>
<p>Facts about Sikkim </p>
</div>
<div data-role="main" class="ui-content">
<a href="#myPanel23" class="ui-btn ui-btn-f"><span class="ui-btn-text">Sikkim</span></a>
</div>
<!--End panel-->
<!--Panel for TA-->
<div data-role="panel" id="myPanel24">
<h2>Tamil Nadu</h2>
<a href="#mypageone" data-rel="close">Close</a>
<p>Facts about Tamil Nadu </p>
</div>
<div data-role="main" class="ui-content">
<a href="#myPanel24" class="ui-btn ui-btn-f"><span class="ui-btn-text">Tamil Nadu</span></a>
</div>
<!--End panel-->
<!--Panel for TN-->
<div data-role="panel" id="myPanel25">
<h2>Telangana</h2>
<a href="#mypageone" data-rel="close">Close</a>
<p>Facts about Telqanaga</p>
</div>
<div data-role="main" class="ui-content">
<a href="#myPanel25" class="ui-btn ui-btn-f"><span class="ui-btn-text">Telangana</span></a>
</div>
<!--End panel-->
<!--Panel for TR-->
<div data-role="panel" id="myPanel26">
<h2>Tripura</h2>
<a href="#mypageone" data-rel="close">Close</a>
<p>Facts about Tripura</p>
</div>
<div data-role="main" class="ui-content">
<a href="#myPanel26" class="ui-btn ui-btn-f"><span class="ui-btn-text">Tripura</span></a>
</div>
<!--End panel-->
<!--Panel for UP-->
<div data-role="panel" id="myPanel27">
<h2>Uttar Pradesh</h2>
<a href="#mypageone" data-rel="close">Close</a>
<p>Facts about Uttar Pradesh</p>
</div>
<div data-role="main" class="ui-content">
<a href="#myPanel27" class="ui-btn ui-btn-f"><span class="ui-btn-text">Uttar Pradesh</span></a>
</div>
<!--End panel-->
<!--Panel for UT-->
<div data-role="panel" id="myPanel28">
<h2>Uttarakhand</h2>
<a href="#mypageone" data-rel="close">Close</a>
<p>Facts about Uttarakhand</p>
</div>
<div data-role="main" class="ui-content">
<a href="#myPanel28" class="ui-btn ui-btn-f"><span class="ui-btn-text">Uttarakhand</span></a>
</div>
<!--End panel-->
<!--Panel for WB-->
<div data-role="panel" id="myPanel29">
<h2>West Bengal</h2>
<a href="#mypageone" data-rel="close">Close</a>
<p>Facts about West Bengal</p>
</div>
<div data-role="main" class="ui-content">
<a href="#myPanel29" class="ui-btn ui-btn-f"><span class="ui-btn-text">West Bengal</span></a>
</div>
<!--End panel-->
</div>
</div>
</div>
</div>
</div>
</body>
</html>