簡體   English   中英

如何在quicksand jQuery插件中居中項目

[英]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的專家,但我想你可以開始檢查這些點:

  1. 在您的代碼之前是否有任何ResetCss表格被調用?
  2. 什么是為您顯示的瀏覽器?
  3. 你試過“margin:auto;” 在“li”類定義?

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM