0

だから私はこのサイトを持っています：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>

これは基本的に、ページにさらに多くのタグが関連付けられている場合は、単純化されたバージョンです。しかし、このコードだけでも（すべてのタグが明らかに閉じられている状態で）機能していないようです。

4

2 に答える 2

1

あなたの属性からdisplay:inline、を削除しますwidthstyleli

<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;
}
于 2012-07-28T07:36:37.190 に答える
1

ここで問題にFlexisliderを使用することを検討できます。レスポンシブスライダーです。

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

于 2012-07-28T08:01:47.223 に答える