javascript - TreeView 正在被包裹-6ren

javascript - TreeView 正在被包裹

转载作者：行者123 更新时间：2023-11-28 14:10:12

当您调整窗口大小时， TreeView 会被换行。

在 Bootstrap 中，表格不会在窗口调整大小时缩小，但会出现一个水平滚动条，可用于滚动表格以查看它。

如何做成像Bootstrap 4响应式表格？这样在窗口调整大小时 TreeView 不会缩小并且水平滚动条变得可见以滚动和查看完整的 TreeView 。

/*Now the CSS*/
* {margin: 0; padding: 0;}

.tree ul {
	padding-top: 20px; position: relative;
	
	transition: all 0.5s;
	-webkit-tranasition: all 0.5s;
	-moz-transition: all 0.5s;
}

.tree li {
	float: left; text-align: center;
	list-style-type: none;
	position: relative;
	padding: 20px 5px 0 5px;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before, .tree li::after{
	content: '';
	position: absolute; top: 0; right: 50%;
	border-top: 1px solid #ccc;
	width: 50%; height: 20px;
}
.tree li::after{
	right: auto; left: 50%;
	border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without 
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
	display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}

/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
	border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
	border-right: 1px solid #ccc;
	border-radius: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	-moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
	border-radius: 5px 0 0 0;
	-webkit-border-radius: 5px 0 0 0;
	-moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before{
	content: '';
	position: absolute; top: 0; left: 50%;
	border-left: 1px solid #ccc;
	width: 0; height: 20px;
}

.tree li a{
	border: 1px solid #ccc;
	padding: 5px 10px;
	text-decoration: none;
	color: #666;
	font-family: arial, verdana, tahoma;
	font-size: 11px;
	display: inline-block;
	
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
	background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{
	border-color:  #94a0b4;
}

<div class="tree">
	<ul>
		<li>
			<a href="#">1</a>
			<ul>
        <li>
					<a href="#">2</a>
					<ul>
            <li>
							<a href="#">2.1</a>
              
						</li>
						<li>
							<a href="#">2.2</a>
						</li>
					</ul>
				</li>
        <li>
					<a href="#">2</a>
					<ul>
            <li>
							<a href="#">2.1</a>
              
						</li>
						<li>
							<a href="#">2.2</a>
						</li>
					</ul>
				</li>
        <li>
					<a href="#">2</a>
					<ul>
            <li>
							<a href="#">2.1</a>
              
						</li>
						<li>
							<a href="#">2.2</a>
						</li>
					</ul>
				</li>
        <li>
					<a href="#">2</a>
					<ul>
            <li>
							<a href="#">2.1</a>
              
						</li>
						<li>
							<a href="#">2.2</a>
						</li>
					</ul>
				</li><li>
					<a href="#">2</a>
					<ul>
            <li>
							<a href="#">2.1</a>
              
						</li>
						<li>
							<a href="#">2.2</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">2</a>
					<ul>
            <li>
							<a href="#">2.1</a>
              
						</li>
						<li>
							<a href="#">2.2</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">3</a>
					<ul>
						<ul>
            <li>
							<a href="#">3.1</a>
              <ul>
            <li>
							<a href="#">3.1.1</a>
						</li>
						<li>
							<a href="#">3.1.2</a>
						</li>
					</ul>
						</li>
						<li>
							<a href="#">3.2</a>
						</li>
					</ul>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</div>

最佳答案

举个简单的例子，我在 .tree 元素周围添加了一个容器，并给它一个 width: 100% 和 overflow: scroll。然后我将 .tree 设置为静态宽度。似乎工作正常。

/*Now the CSS*/
* {margin: 0; padding: 0;}
.tree { width: 1000px; } /* ******* I added this ******* */
.tree ul {
	padding-top: 20px; position: relative;
	
	transition: all 0.5s;
	-webkit-tranasition: all 0.5s;
	-moz-transition: all 0.5s;
}

.tree li {
	float: left; text-align: center;
	list-style-type: none;
	position: relative;
	padding: 20px 5px 0 5px;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before, .tree li::after{
	content: '';
	position: absolute; top: 0; right: 50%;
	border-top: 1px solid #ccc;
	width: 50%; height: 20px;
}
.tree li::after{
	right: auto; left: 50%;
	border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without 
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
	display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}

/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
	border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
	border-right: 1px solid #ccc;
	border-radius: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	-moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
	border-radius: 5px 0 0 0;
	-webkit-border-radius: 5px 0 0 0;
	-moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before{
	content: '';
	position: absolute; top: 0; left: 50%;
	border-left: 1px solid #ccc;
	width: 0; height: 20px;
}

.tree li a{
	border: 1px solid #ccc;
	padding: 5px 10px;
	text-decoration: none;
	color: #666;
	font-family: arial, verdana, tahoma;
	font-size: 11px;
	display: inline-block;
	
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
	background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{
	border-color:  #94a0b4;
}
.tree-cont { width: 100%; overflow: scroll; }

<div class="tree-cont"> <!-- added this wrapper -->
<div class="tree">
	<ul>
		<li>
			<a href="#">1</a>
			<ul>
        <li>
					<a href="#">2</a>
					<ul>
            <li>
							<a href="#">2.1</a>
              
						</li>
						<li>
							<a href="#">2.2</a>
						</li>
					</ul>
				</li>
        <li>
					<a href="#">2</a>
					<ul>
            <li>
							<a href="#">2.1</a>
              
						</li>
						<li>
							<a href="#">2.2</a>
						</li>
					</ul>
				</li>
        <li>
					<a href="#">2</a>
					<ul>
            <li>
							<a href="#">2.1</a>
              
						</li>
						<li>
							<a href="#">2.2</a>
						</li>
					</ul>
				</li>
        <li>
					<a href="#">2</a>
					<ul>
            <li>
							<a href="#">2.1</a>
              
						</li>
						<li>
							<a href="#">2.2</a>
						</li>
					</ul>
				</li><li>
					<a href="#">2</a>
					<ul>
            <li>
							<a href="#">2.1</a>
              
						</li>
						<li>
							<a href="#">2.2</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">2</a>
					<ul>
            <li>
							<a href="#">2.1</a>
              
						</li>
						<li>
							<a href="#">2.2</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">3</a>
					<ul>
						<ul>
            <li>
							<a href="#">3.1</a>
              <ul>
            <li>
							<a href="#">3.1.1</a>
						</li>
						<li>
							<a href="#">3.1.2</a>
						</li>
					</ul>
						</li>
						<li>
							<a href="#">3.2</a>
						</li>
					</ul>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</div>
</div>

关于javascript - TreeView 正在被包裹，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56625108/

文章推荐： html - 如何在一列中应用两种样式

文章推荐： jquery - jQuery Mobile 中的自定义按钮

文章推荐： css - 如何修复在 Chrome 中再次加载图像

文章推荐： swift - 带有动画 Sprite 的 SKSpriteNode 和 SKAction

kendo-ui - Kendo UI TreeView - 如何将内容从一个 Treeview 复制到另一个 Treeview ？
我在一页上有两个 Kendo UI TreeViews。例如: var data1 = new kendo.data.HierarchicalDataSource({ data: [
treeview - Vuetify treeview - 选择父级而不选择子级
使用 Vuetify 的 TreeView 组件时，我试图能够选择父级没有让它也选择所有的后代( child )。我尝试了可选、可激活等的各种组合……但似乎找不到合适的组合。任何人都有实现这一预
treeview - JavaFX - TreeView 在删除所选项目时的奇怪行为
在我的应用程序中，左侧有一个 TreeView，我根据 TreeView 中的选择更新右侧的 Pane 。一个非常直接的场景。当选择为空时，我会在 Pane 中显示一条类似“请进行选择”的消息，即我还
treeview - Doxygen:如何在 TreeView 中隐藏某些页面
我有一个我自己无法解决的问题。请帮忙。我有(有条件地): /** @mainpage A @subpage B */ /** @page B @subpage C */ /** @page C */
treeview - JDK 8 TreeView 披露三角形垂直对齐不正确
我制作了一个高度为 40 px 的自定义树单元。这里的问题披露三角形没有垂直居中对齐。这里是树单元的代码: public static class TestObjectCell extends A
treeview - 如何使用 TornadoFX TreeView 显示数据
我正在学习如何使用 kotlin 并已开始使用tornadoFX。我正在阅读该指南以尝试学习它，但是我无法弄清楚“具有不同类型的 TreeView”中的含义。似乎是说我应该使用星形投影，据我所知，当您
treeview - Javafx 2 TreeView 过滤
如何在 JavaFX 2 TreeView 中过滤节点？我有一个 TextField，我想根据 TextField 的内容过滤所有节点(例如节点标签)。谢谢。最佳答案这是我编写的可重用的可过滤
treeview - Asp.Net TreeView 具有扩展深度的选定节点
我正在通过查询 sharepoint 用户配置文件构建一个 asp.net TreeView 。要选择的帐户名和根节点帐户名正在从查询字符串中读取。我还需要为树配置可配置的扩展深度。如果节点属于第
treeview - TreeView 中的 TreeItem 选择宽度
我使用的是 JavaFX 8，目前正在进行一些 GUI 开发。我的 TreeView 有点问题，我需要你的帮助。您知道在 TreeView 中是否可以只选择标签而不是 TreeCell 的整个宽度吗
c++ - TreeView 中的分层数据和 TreeView 更新技术
我有很多(分层的)数据显示在 TreeView 中(可能是大约 20K 项或更多，包括子项)。我的数据的特殊问题是 TreeView 中显示的每个对象都可以存在于许多 TreeView 项目中。我的意
treeview - Vala 中的 Gtk.TreeView 可编辑列
有没有什么简单的方法可以让 Gtk.Treeview 在编辑时更新它的列？我基于 Gtk.ListStore 模型构建了 Treeview。我这样初始化单元格: Gtk.CellRendererTe
treeview - 在 TreeView 中更新 JavaFX 节点
我开始使用 javafx。我有一个问题。我有一个树 View ，其中节点通过外部命令改变了他的位置，但它只是看不到树。我必须最小化父级并重新展开才能看到效果。 Altem 对该树 View 的任何建议
kendo-treeview - 取消选择 Kendo Treeview 节点
如何在 Kendo Treeview 中取消选择节点？我尝试从节点中删除类“k-state-selected”。它工作正常，但有没有直接的方法可以做到这一点。最佳答案现在有一种更好的方法可以取消
kendo-treeview - 仅在使用 Kendo Treeview 的子节点上显示复选框
我有以下情况，我有一个带有许多嵌套子节点的父节点。只有父节点应该有一个复选框，我发现的唯一例子是只有子节点有一个复选框。这可以使用 Kendo 模板吗？ http://dojo.telerik.com
kendo-treeview - 带有模板选项的 Angular-Kendo TreeView
我正在尝试向 TreeView 数据项添加一些内联图标，但是 k-template 指令似乎没有呈现任何内容。我基于在线文档在 http://demos.telerik.com/k
javascript - Kendo Treeview - 如何在另一个 Treeview 中显示具有所有父节点的选定节点
我有一个带有复选框和父节点和子节点的 Kendo Treeview 。我需要将选中节点的完整层次结构复制到另一个 Treeview 中。 ex - 根节点、父节点和选中的子节点。下面是我的代码，但
treeview - 删除 JavaFX TreeView 滚动 Pane
我需要在较大的滚动 Pane 中使用 JavaFX 2.2 TreeView 控件，该滚动 Pane 具有多个不属于 Treeview 的其他元素。问题是 TreeView 有它自己的内置滚动 Pan
treeview - 展开 Windows 窗体 TreeView 节点而不选择它
当我通过单击 TreeView 节点右侧的加号来展开该节点时，该节点将被选中。我怎样才能避免这种情况？我希望能够在不更改所选节点的情况下展开节点(例如在 RegEdit.exe 中)，并且仅在单击节点
vba - 从 Treeview 对象变量设置 Treeview 控件？
我正在尝试设置一个 Treeview 对象，设置节点，然后更新控件以使值具有适当的格式。现在我有以下代码，当我设置一个控件时，它可以工作，但不是来自变量的控件。如何从变量设置本地控件？ Private
c# - 如何将一个 TreeView 实例的节点添加到同一 TreeView 的另一个实例
如何将节点填充到作为另一个 treeview1 实例的 newtreeview1 中？添加到“newtreeview1”的节点应该在 treeview1 的第一个实例中可用？例如；如果 treevi

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - TreeView 正在被包裹