Как центрировать элементы li в плагине Quicksand JQuery - PullRequest
Новая
       24

Как центрировать элементы li в плагине Quicksand JQuery

3 голосов
/ 04 июня 2010

Моя проблема в том, что в некоторых разрешениях экрана элементы списка не находятся в центре div, в то время как <ul> центрируется.
Кто-нибудь знает решение?
Спасибо!

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;
}

Ответы [ 2 ]

2 голосов
/ 04 июня 2010

Вы можете сделать это довольно легко с помощью этой CSS (при условии, что у вас есть сброс, чтобы очистить поля, отступы и стиль списка ul / li). Если для display установить значение inline, а не для ширины, каждый 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 */
}
0 голосов
/ 04 июня 2010

Я не эксперт, когда дело доходит до HTML и CSS, но я думаю, вы можете начать проверять эти пункты:

  1. Есть ли лист ResetCss, называемый перед вашим кодом?
  2. Какой браузер дает вам этот дисплей?
  3. Вы пробовали "margin: auto;" в определение класса "li"?
...