6

問題

ここに画像の説明を入力 ここに画像の説明を入力

Y軸ではな​​く、X軸で強制的にスクロールするコンテンツが必要です。

HTML

これはフォーマットが悪いことはわかっていますが、動的に生成され、空白がありません。

<div class="folderWrapper" id="folderContainer"><div class="folderBox ui-droppable folderBoxSel" onclick="folderSelected(0)" id="fBox0"><div class="counter" id="fCount0">4</div><div class="folderName">Unsorted</div></div><div class="folderBox ui-droppable" onclick="folderSelected(1)" id="fBox1"><div class="counter" id="fCount1">0</div><div class="folderName">test</div></div><div class="folderBox" onclick="folderSelected(1)" id="fBox1"><div class="counter" id="fCount1">0</div><div class="folderName">test</div></div><div class="folderBox" onclick="folderSelected(1)" id="fBox1"><div class="counter" id="fCount1">0</div><div class="folderName">test</div></div><div class="folderBox" onclick="folderSelected(1)" id="fBox1"><div class="counter" id="fCount1">0</div><div class="folderName">test</div></div><div class="folderBox" onclick="folderSelected(1)" id="fBox1"><div class="counter" id="fCount1">0</div><div class="folderName">test</div></div></div>

1 つのフォルダー内ボックスで適切にフォーマットされています。

<div class="folderWrapper" id="folderContainer">
    <div class="folderBox ui-droppable folderBoxSel" onclick="folderSelected(0)" id="fBox0">
        <div class="counter" id="fCount0">4</div>
        <div class="folderName">Unsorted</div>
    </div>
</div>

CSS

.folderWrapper{
    overflow-x:scroll;
    overflow-y:hidden;
    height:85px;
    white-space:nowrap;
    margin-bottom:5px;
}
.folderBox{
    float:left;
    background-image:url(../images/artworking/folder.png);
    background-position:center top;
    background-repeat:no-repeat;
    width:85px;
    height:55px;  
    position:relative;
    padding:5px;
    z-index:4;
    white-space:nowrap;
}
.folderBox:hover{
    cursor: pointer;
}

誰か助けてくれたらありがとう！

編集

Bazzz の回答は、IE 互換モード (残念ながら互換性が必要です) を除くすべてのブラウザーで機能し、次のようになります。

ここに画像の説明を入力

IEハックで：

ここに画像の説明を入力

4

2 に答える 2

8

inline-block代わりにfolderBoxで使用するfloat:left

.folderBox{
    float: left; /* remove this line */
    display: inline-block; /* add this line */
}

空白：no-wrapは浮動要素では機能せず、インライン要素で機能します。

IE 7の場合、私はあなたを助けるかもしれない小さなハックを見つけました：

http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

このcssを試してください：

.folderBox{
 display: inline-block;
 zoom: 1;
 *display: inline;
 }

最新の編集：

このcssは、IE 8互換モード（IE7標準）で動作します。

.folderWrapper{
    overflow-x: scroll;
    overflow-y: hidden;
    height:85px;
    width: 300px; /* not really your css, I used it in my test case */
    white-space:nowrap;
}
.folderBox{
    display: inline-block;
    zoom: 1;
    *display: inline;
    background-image:url(../images/artworking/folder.png);
    background-position:center top;
    background-repeat:no-repeat;
    width:85px;
    height:55px;  
}

IE7のオーバーフローしない問題は、使用するものにあるposition:relativeと思います。私はそれと他のいくつかのcssを削除しました、そして今それは動作します。

于 2011-02-03T11:00:15.057 に答える
0

次のようなHTMLを作成します。

<div id="folderWrapper">
     <ul id="folderList">
         <li class="folderBox">...</li>
         <li class="folderBox">...</li>
         <li class="folderBox">...</li>
     </ul>
</div>

およびCSS：

#folderWrapper {
    position:relative;
    z-index:1;
    width:300px;
    overflow:hidden;
}
#folderList {
    position:absolute;
    z-index:2;
    width:20000px;
}
.folderBox {
    float:left;
}

次に、＃folderWrapper内でjqueryベースのスクロールバーを使用します：http： //www.net-kit.com/jquery-custom-scrollbar-plugins/

私はjScrollPaneが好きです。

于 2011-02-03T13:24:45.580 に答える