0

もちろん、それらは隣り合って表示されますがfloat:left;、ラッパー div に収まらないフローティング div を除きます。

div が互いに隣り合って x 軸上を流れるようにする必要があります。ラッパーに固定幅を設定し、ラッパーを別のラッパーでラップすることで実行できることはわかっていますが、幅は静的ではなく、スクリプトを使用して幅を計算しないことを好みます。

状況は次のとおりです。

<div id="wrapper">
  <div class="floatleft"></div>
  <div class="floatleft"></div>
  <div class="floatleft"></div>
</div>

//Wrapper WITHOUT fixed width
#wrapper{
  overflow:hidden;
}

.floatleft{
  float:left;
  width:500px;
}
4

1 に答える 1

1

http://jsfiddle.net/imsky/EbAFw/inline-blockでそれを行うことができますwhite-space:nowrap 

<ul id="wrap">
    <li>A</li><li>B</li><li>C</li><li>D</li><li>E</li>    
</ul>

#wrap {margin:20px;width:300px;height:100px;background:yellow;overflow-x:scroll;overflow-y:hidden;white-space:nowrap}
li {display:inline-block;width:100px;height:100%;background:#5AA4D7;color:#fff;font-family:sans-serif}

唯一の問題は、マークアップが空白に敏感になることです。

編集：これはクロスブラウザで機能し、IE7以下ではルール*display:inline;zoom:1の最後にa が必要です。li

于 2012-04-13T17:51:41.497 に答える