我需要帮助集中略微修改的响应式jQuery Mobile列表视图。
目前一切都很完美，我只需要将列表本身放在屏幕上。这意味着无论大小如何，列表都应该在屏幕上居中。
此外，在全尺寸桌面浏览器上，该列表位于可折叠容器之外。你可以看到里面没有包裹它。
ex：http://olajideolaolorun.com/dev/test1/index.html
HTML：
<div data-role="content">
<div data-role="collapsible">
<h2>Team</h2>
<ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
<li class="ui-li-has-thumb"><a href="index.html" data-ajax="false" class="ui-btn ui-btn-icon-right ui-icon-carat-r"><img src="_assets/img/lumia_800.png" height="60"><h2>User, Test </h2><p><small>Technical SME, Sun City, Gurgaon, IN<br>+00-124-567-890 +00-12-34-451239 m</small></p></a></li>
<li class="ui-li-has-thumb"><a href="index.html" data-ajax="false" class="ui-btn ui-btn-icon-right ui-icon-carat-r"><img src="_assets/img/lumia_800.png" height="60"><h2>User, Test </h2><p><small>IT Analyst, Dayton, US<br>+1-123-456-7890 +1-123-456-7890 m</small></p></a></li>
<li class="ui-li-has-thumb"><a href="index.html" data-ajax="false" class="ui-btn ui-btn-icon-right ui-icon-carat-r"><img src="_assets/img/lumia_800.png" height="60"><h2>User, Test </h2><p><small>IT Analyst, Duluth, US<br>+1-123-456-5188 +1-123-456-1016 m</small></p></a></li>
<li class="ui-li-has-thumb"><a href="index.html" data-ajax="false" class="ui-btn ui-btn-icon-right ui-icon-carat-r"><img src="_assets/img/lumia_800.png" height="60"><h2>User, Test </h2><p><small>Technical SME, Sun City, Gurgaon, IN<br>+00-124-567-3365 +00-12-34-033006 m</small></p></a></li>
<li class="ui-li-has-thumb"><a href="index.html" data-ajax="false" class="ui-btn ui-btn-icon-right ui-icon-carat-r"><img src="_assets/img/lumia_800.png" height="60"><h2>User, Test</h2><p><small>Intern - MIS, Duluth, US<br>+1-123-456-7890 +1-123-456-7980 m</small></p></a></li>
<li class="ui-li-has-thumb"><a href="index.html" data-ajax="false" class="ui-btn ui-btn-icon-right ui-icon-carat-r"><img src="_assets/img/lumia_800.png" height="60"><h2>User, Test </h2><p><small>Sun City, Gurgaon, IN<br></small></p></a></li>
<li class="ui-li-has-thumb"><a href="index.html" data-ajax="false" class="ui-btn ui-btn-icon-right ui-icon-carat-r"><img src="_assets/img/lumia_800.png" height="60"><h2>User, Test</h2><p><small>IT Analyst, Duluth, US<br>+1-123-456-7890 +1-123-456-7890 m</small></p></a></li>
<li class="ui-li-has-thumb"><a href="index.html" data-ajax="false" class="ui-btn ui-btn-icon-right ui-icon-carat-r"><img src="_assets/img/lumia_800.png" height="60"><h2>User, Test </h2><p><small>Sun City, Gurgaon, IN<br></small></p></a></li>
<li class="ui-li-has-thumb ui-last-child"><a href="index.html" data-ajax="false" class="ui-btn ui-btn-icon-right ui-icon-carat-r"><img src="_assets/img/lumia_800.png" height="60"><h2>User, Test</h2><p><small>Sun City, Gurgaon, IN<br>+00-12-34-56789 +00-12345-678-901 m</small></p></a>
</li>
</ul>
</div>
</div>
修改后的CSS：
.my-page .ui-listview li .ui-btn p {
color: #c0c0c0;
}
.my-page .ui-listview li .ui-btn .ui-li-aside {
color: #eee;
}
@media ( min-width: 38em ) {
.my-page .ui-content {
padding: .5625em; /* 9px */
}
.my-page .ui-listview {
max-width: 78em; /* 1000px */
margin: 0 auto;
}
.my-page .ui-listview li {
float: left;
width: 270px;
/* width: 30.9333%; /* 33.3333% incl. 2 x 1.2% margin */
height: 5em;
/* height: 14.5em; */ /* 232p */
margin: .5625em 1.2%;
}
.my-page .ui-listview li > .ui-btn {
-webkit-box-sizing: border-box; /* include padding and border in height so we can set it to 100% */
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
}
.my-page .ui-listview li.ui-li-has-thumb .ui-li-thumb {
height: auto; /* To keep aspect ratio. */
max-width: 100%;
max-height: none;
}
.my-page .ui-listview li,
.my-page .ui-listview li .ui-btn,
.my-page .ui-listview .ui-li-thumb {
-webkit-border-radius: inherit;
border-radius: inherit;
}
/* Hide the icon */
.my-page .ui-listview .ui-btn-icon-right:after {
display: none;
}
/* Make text wrap. */
.my-page .ui-listview h2,
.my-page .ui-listview p {
white-space: normal;
overflow: visible;
position: absolute;
left: 0;
right: 0;
}
.my-page .ui-listview h2 {
font-size: 1em;
margin: 0;
padding: 0 1em 1.3em 4.5em;
bottom: 50%;
}
.my-page .ui-listview p {
font-size: .7em;
margin: 0;
padding: 0 1.25em 2em 6.5em;
min-height: 50%;
bottom: 0;
}
/* .ui-listview .ui-li-has-thumb h2,
.ui-listview .ui-li-has-thumb p {
background: #111;
background: rgba(0,0,0,.8);
} */
.ui-listview .ui-li-has-thumb h2 {
bottom: 35%;
}
.ui-listview .ui-li-has-thumb p {
min-height: 35%;
}
.my-page .ui-listview .ui-li-aside {
padding: .125em .625em;
width: auto;
min-height: 0;
top: 0;
left: auto;
bottom: auto;
/* Custom styling. */
background: #990099;
background: rgba(153,0,153,.85);
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
}
.my-page .ui-listview li {
-moz-box-shadow: 0px 0px 9px #111;
-webkit-box-shadow: 0px 0px 9px #111;
box-shadow: 0px 0px 9px #111;
}
.my-page .ui-listview li > .ui-btn:hover {
-moz-box-shadow: 0px 0px 12px #33ccff;
-webkit-box-shadow: 0px 0px 12px #33ccff;
box-shadow: 0px 0px 12px #33ccff;
}
.my-page .ui-listview li,
.my-page .ui-listview .ui-btn {
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
-ms-transition: all 500ms ease;
transition: all 500ms ease;
}
}
请帮助。 谢谢。
答案 0 :(得分：0)
在容器中你应该给它一个固定宽度的例子960px，并且媒体查询调整到更小的屏幕......