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盒子有一个适合容器的背景，而不是内容，这是不寻常的和不受欢迎的。

.explorer在您的情况下，快速解决方法是在, 和 set内插入一个虚拟 div style="float: left"，这将提示浏览器从其子项重新计算框大小，而不是其父项的宽度。

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

于 2012-11-15T02:36:59.117 回答