0

javascript オブジェクトからフォルダ/ファイル ツリーをロードするファイル システムを構築しています。それは非常にうまく機能しますが、現在、スクロールできるボックスにすべてを制限しようとしています. 問題は、ボックス (.explorer) がファイルとフォルダーの幅を独自の幅に制限していることです。ファイルとフォルダーのテキストは制限されず、背景色のみが制限されます。

CSSとHTMLはこちら。お役に立てれば幸いです。

.explorer{
    width:100px;
    height:100px;
    margin:35px;
    float:left;
    overflow:auto;
}
.folder, .file{
    width:100%;
    padding:4px 6px;
    cursor: pointer;
    Background:#212121;
    color:#fff;
}
.file{
    Background:#eb9824;
}
.hide, .show{
    margin-left:20px;
}

そしてjavascriptで生成されたラフHTMLの一部

<div class="explorer">

    <div class="folder">root</div>
    <div class="show" id="rootcontents">

        <div class="folder" id="root-folder1">folder1</div>
        <div class="show" id="root-folder1contents">

            <div class="folder" id="root-folder1-folder1">folder1</div>
            <div class="hide" id="root-folder1-folder1contents" style="display: block;">

                <div class="folder" id="root-folder1-folder1-folder1">folder1</div>
                <div class="hide" id="root-folder1-folder1-folder1contents" style="display: block;">

                    <div class="file" id="root-folder1-folder1-folder1-file1">file1</div>
                    <div class="file" id="root-folder1-folder1-folder1-file2">file2</div>

                </div>
            </div>

            <div class="folder" id="root-folder1-folder2">folder2</div>
            <div class="hide" id="root-folder1-folder2contents" style="display: none;">

                <div class="folder" id="root-folder1-folder2-folder1">folder1</div>
                <div class="hide" id="root-folder1-folder2-folder1contents" style="display: none;">

                    <div class="file" id="root-folder1-folder2-folder1-file1">file2</div>
                    <div class="file" id="root-folder1-folder2-folder1-file2">file2</div>

                </div>
            </div>
        </div>
    </div>
</div>
4

1 に答える 1

1

私はそれをバグと呼ぶでしょう。ボックスには.explorer、内容ではなくコンテナに合う背景がありますが、これは珍しく、望ましくありません。

あなたの場合の簡単な修正は、ダミーのdivを、のすぐ内側に挿入し.explorer、を設定style="float: left"することです。これにより、ブラウザは、親の幅ではなく、子からボックスサイズを再計算するように求められます。

http://jsfiddle.net/G9v4w/2/

于 2012-11-15T02:36:59.117 に答える