jQuery Mobile響應式列表視圖居中
[英]jQuery Mobile Responsive listview Centering
問題描述
我需要將稍微修改的響應式jQuery Mobile listview居中的幫助。
當前，一切正常，我只需要將列表本身放在屏幕中央即可。 這意味着無論大小如何，列表都應位於屏幕中央。
同樣在全尺寸桌面瀏覽器中，該列表位於可折疊容器之外。 您可以看到它沒有包裹在里面。
例如： 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;
}
}
請幫忙。 謝謝。
1 個解決方案
解決方案1
0 2014-06-12 19:11:06
在容器中，您應該給它一個固定寬度的示例960px，並使用媒體查詢將其調整為更多的小屏幕...
在列表視圖中居中放置文本
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.