Question

My problem is that in some screen resolutions the list items are not in the center of the div while the <ul> is centered.
Does anyone know a solution?
Thanks!

传真:

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

Answer 1

你们可以很容易地利用这些芯片(假设你可以重新定位,以清除ul/利的边缘、dding子和名单式)。通过在网上展示而不是打上宽度,每一升值将以斜体为核心: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 */
}

Answer 2

我对超文本和特别安全局没有专家,但认为你可以开始检查这些要点:

Is there any ResetCss sheet called before your code ?
What is the browser that gives you this display ?
Have you tried "margin: auto;" in the "li" class definition ?

友情链接