Question

所以我有这个网站：http://onthemouse.com/。我使用首页上的<li>标签将我的投资组合图像放在网格中。我需要它们并排排列并自动水平滚动，可能使用javascript或jquery（请不要使用其他库）。如果它还有一个滚动条就没问题。我尝试过这样的事情：

.portfolio li {
  width: 438px !important;
  display:inline !important;
}

然后

<ul id="thumbs" style="width:100%;list-style:none;display:block;white-space:nowrap;">
    <li class="portfolio" style="width: 438px; opacity: 1;display:inline;">
      <a href="BLAHBLAH" title="BLAHBLAH">
        <img src="BLAHBLAH" alt="" title="" >
      </a>
    </li>

这基本上只是一个精简版本，如果你在页面上看到更多标签相关联。但即使是这个代码（显然所有标签都关闭了）似乎也不起作用..

Answer 1

从display:inline

的width attr删除style，li

<ul id="thumbs" style="list-style:none;">
<li class="portfolio" style="opacity: 1;">
  <a href="BLAHBLAH" title="BLAHBLAH">
    <img src="BLAHBLAH" alt="" title="" >
  </a>
</li>



#works, #wrapper {
    overflow: visible;
}
body {
    overflow-x:auto;
}
#thumbs .portfolio {
    display:inline-block;
    width: 438px !important;
    float:none !important;
}
#thumbs {
    white-space:nowrap;
}
/* for ie 7*/
*:first-child+html #thumbs .thumb {
    display:inline;
    zoom:1;
}
/* for ie 6*/
*html #thumbs .thumb {
    display:inline;
    zoom:1;
}

Answer 2

您可以考虑在此处使用Flexislider解决您的问题。这是一个响应滑块。

http://www.woothemes.com/flexslider/

如何在响应式设计中水平自动滚动图像

2 个答案: