0

我有一个设置为水平显示而不是垂直显示的列表。它也设置为全屏高度（不确定这是否会有所不同）。该列表在 Chrome 和 Safari 中正确显示，但在 Firefox 中仅显示第一项。有时如果我刷新，它会显示所有项目，但仅以垂直格式显示。我尝试了几种修复方法，但似乎都没有。如果有人能对此有所了解，将不胜感激。

这是HTML：

<ul class="project">

<li class="item">
<div class="overlay">
<section class="img-info">
  <h1>Ro, 2012</h1>

</section>
</div>
<img src="01.jpg" />
</li>

<li class="item">
<div class="overlay">
<section class="img-info">
  <h1>Jonathan, 2012</h1>

</section>
</div>
<img src="02.jpg" />
</li>
</ul>

这是CSS：

article.projects {
    height:100%;
    float:none;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space:nowrap;
}

article.projects ul.project {
    height:100%;
    width:auto;
    display:inline-block;
    float:left;
    padding-left:72px;
}

article.projects ul.project li.item {
    height:100%;
    width:auto;
    min-width:300px;
    float:left;
    padding-bottom:0px;
    padding-right:1px;
}

该网站在这里 - http://jennagarrett.com/

该站点是响应式的，因此如果您进入代码，相关的 css 将位于文件的底部。

4

0 回答 0