[英]How to center li items in quicksand jQuery plugin
我的問題是,在某些屏幕分辨率下,當<ul>
居中時,列表項不在div的中心。
有誰知道解決方案?
謝謝!
HTML:
<ul class="news-grid">
<li></li>
<li></li>
</ul>
腳本:
$(function() {
$('#buttons a').click(function(e) {
$.get( $(this).attr('href'), function(data) {
$('.news-grid').quicksand( $(data).find('li'), {adjustHeight: 'dynamic'} );
});
e.preventDefault();
});
});
CSS:
.news-grid {
overflow: hidden;
margin: 0px;
padding-left: 0px;
width: 100%;
line-height: 1.4em;
}
.news-grid:after {
content: "";
display: block;
height: 0;
overflow: hidden;
clear: both;
}
.news-grid li {
display: block;
float: left;
width: 217px;
text-align: left;
line-height: 17px;
color: #686f74;
height: 268px;
overflow: hidden;
background: url(../images/item_png8.png) no-repeat top left;
margin: 0px 0px 20px 30px;
}
你可以通過使用這個css很容易地做到這一點(假設你有一個重置來清除ul / li的邊距,填充和列表樣式)。 通過將顯示設置為內聯而不設置寬度,每個li將以ul text-align: center
並且由於右邊距應相對均勻。
#news-grid
{
overflow: hidden;
text-align: center;
width: 100%;
/* whatever other specific styles you want */
}
#news-grid li
{
display: inline;
margin-right: 2%;
/* whatever other specific styles you want */
}
我不是HTML和CSS的專家,但我想你可以開始檢查這些點:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.