1

一連の画像を div タグ内で水平方向に配置し、画像が div タグの長さを超えたときに水平スクロール バーを表示しようとしています。私はCSSに比較的慣れていないので、考えられることはすべて試しました。以下のコードは私の画像を垂直に表示します!!!

助けてくれてありがとう。

body タグ内:

<div id="TNBox">
<ul class="imagelist">
    <li>
        <img id="tnimage1" src="images/tn-images/Rio-Street-Art-TN01.jpg">
    </li>
    <li>
        <img id="tnimage2" src="images/tn-images/Rio-Street-Art-TN02.jpg">
    </li>
    <li>
        <img id="tnimage3" src="images/tn-images/Rio-Street-Art-TN03.jpg">
    </li>
    <li>
        <img id="tnimage4" src="images/tn-images/Rio-Street-Art-TN04.jpg">
    </li>
    <li>
        <img id="tnimage5" src="images/tn-images/Rio-Street-Art-TN05.jpg">
    </li>
</ul>
</div>



And the CSS:

#TNBox {
    width: 500px;
    height: 88px;
    border: 1px solid black;
    position: absolute;
    left: 50px;
    top: 320px;
    overflow-x: auto;
    display: inline-block;
    text-decoration: none;
}
.imagelist {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
4

2 に答える 2

3 
#TNBox{
    width: 500px;
    height: 88px;
    border: 1px solid black;
    position: absolute;
    left: 50px;
    top: 320px;
    overflow-x: auto;
    display: inline-block;
    text-decoration: none;
    white-space:nowrap;
}
.imagelist{
    list-style: none;
    margin: 0px;
    padding: 0px;
}
.imagelist li{
    display:inline-block;
}

プレビュー >> jsfiddle (画像にもスタイルを設定しました)

于 2013-03-07T01:21:14.973 に答える
2

フィドルへのリンク。また、画像のURLを変更して、存在するものを指すようにしました

http://jsfiddle.net/GVdMz/2/

これが私が追加したものです：

画像を横向きに表示するには

.imagelist li{
  display: inline;
}

これにより、画像が #TNBox の幅を超えると水平スクロールが表示されます

#TNBox{
  white-space:nowrap;
}
于 2013-03-07T01:32:37.307 に答える