如何让我的树视图元素溢出父div的宽度？

时间：2015-08-13 15:52:05

标签： javascript jquery html css asp.net-mvc

我正在使用bootstrap-treeview尝试在我的MVC项目中创建一个漂亮的树视图。这个控件可以在NuGet上使用，因此很容易上手。左手div显示树，右手div显示单击时每个元素的内容：

<body>
    <div id="tree" style="position:absolute; width: 20%; height: 100%; overflow: scroll"></div>
    <div id="content" class="list-group-item node-tree" style="position: absolute; left: 20%; width: 80%; height: 100%">This is where content goes once you click on a file or folder element.</div>
</body>

但是有一个小问题。 ID为tree的div的内容被截断：

enter image description here

理想情况下，我希望这些列表元素向右溢出，超出ID = tree的div的大小，正如您所知道的那样，因为我设置了overflow: scroll，所以我不希望任何文本换行到新行。

在运行时，它会附加列表元素，如下所示......

enter image description here

这些列表元素似乎有以下CSS：

.list-group-item {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid #ddd;
}

我尝试将white-space: nowrap;添加到此CSS，这使得文本按我想要的方式执行（并使用滚动条溢出），但每个列表元素的背景和边框保持在父级的宽度（不是我想要的;我希望它们也像我对文本那样溢出所有可滚动的宽度）！

enter image description here

我该怎么做才能使这个列表中的每个元素正确溢出超出它们都存在的父div的边界？

修改：我已经尝试将overflow:visible放在所有父级别上，但它不起作用。它删除了垂直滚动条并保持所有列表项背景边框仍然限制为tree div的宽度。我还发现在width = 10000px CSS上设置.list-group-item部分地给了我想要的东西，但显然这会使背景太宽而且滚动条变得太长。我希望所有列表元素的宽度等于最宽泛的内容的宽度。

2 个答案:

答案 0 :(得分：1)

我明白了。我必须将display更改为table-row-group，我必须添加white-space: nowrap：

.list-group-item {
    position: relative;
    display: table-row-group;
    padding: 10px 15px;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid #ddd;
    white-space: nowrap;
}

答案 1 :(得分：0)

将overflow:visible添加到父元素。您可能需要多个级别，因为每个父元素都可能限制内容。

相关问题
最新问题