0

たくさんの写真が並んだブロックを作りたいです。Web ページの幅が常に小さすぎるため、横スクロールを追加したいと考えています。

ここに作成しました：http://jsfiddle.net/49REZ/

HTML

<div class="wrapper">
    <div class="photos">
        <ul>
            <li><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg"/></li>
            <li><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg"/></li>
            <li><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg"/></li>
            <li><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg"/></li>
        </ul>
    </div>
</div>

CSS

.wrapper {
    width: 80%;
    margin: 10px auto;
}

.wrapper {
    overflow-x: scroll;
    overflow-y: hidden;
}

ul, li {
    margin: 0;
    padding: 0;
}

.wrapper ul {
    width: 10000px;
}

ul li {
    list-style: none;
    float: left;
}

Chromeでは問題なく動作します。

10000pxしかし、Firefox では、写真の後に空き領域の多いブロックがフェアリー表示されるため、うまく機能しません。

4

3 に答える 3

1

css を次のものに置き換えてみてください。

.wrapper ul {
    white-space: nowrap;
}

ul li {
    list-style: none;
    display: inline-block;
}

http://jsfiddle.net/49REZ/4/

于 2013-04-18T13:02:04.847 に答える
1

これを試すことができます:
HTML: 

<ul class="images">
  <li><a href="#"><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></a></li>
  <li><a href="#"><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></a></li>
  <li><a href="#"><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></a></li>
  <li><a href="#"><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></a></li>
  <li><a href="#"><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></a></li>
  <li><a href="#"><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></a></li>
  <li><a href="#"><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></a></li>
</ul>

CSS: 

  ul.images {
    margin: 0;
    padding: 0;
    white-space: nowrap;
    width: 500px;
    overflow-x: auto;
    background-color: #ddd;
  }
  ul.images li {
    display: inline;
    width: 150px;
    height: 150px;
  }

jsfiddle

于 2013-04-18T13:19:09.343 に答える