昨天有一个zTree的使用者在实际的项目中有着这样一个特殊的需求，要求同级树节点能够水平显示，根据设定的宽度自动换行，效果图如下所示：
通过在浏览器调试模式下观察其同级节点的css为：
li {
display: list-item;
text-align: -webkit-match-parent;
}
这个display属性就注定了其节点都会像item一样垂直显示的。我们知道了这一点所以问题解决方案就出来了。
解决思路：
1、彻底修改zTree树所配备的zTreeStyle.css文件；
2、打开文件主要修改前第二、三行；
1）、需要给zTree设定一个固定宽度且能够支持超出宽度值自动换行，于是我们修改后的zTree类的样式为：
.ztree {
margin:0;
width:300px;
padding:5px;
color:#333;
word-break: break-all;
word-wrap:break-word;
}
2）、需要设置节点的display属性为平铺模式
.ztree li{
padding:0;
margin:0;
list-style:none;
display:inline;
line-height:14px;
text-align:left; outline:0;
}
display:inline;这个就是表示平铺模式了的。
具体display属性值的特性请参考下面的表格：
|
值 |
描述 |
|
none |
此元素不会被显示。 |
|
block |
此元素将显示为块级元素，此元素前后会带有换行符。 |
|
inline |
默认。此元素会被显示为内联元素，元素前后没有换行符。 |
|
inline-block |
行内块元素。（CSS2.1 新增的值） |
|
list-item |
此元素会作为列表显示。 |
|
run-in |
此元素会根据上下文作为块级元素或内联元素显示。 |
|
compact |
CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 |
|
marker |
CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 |
|
table |
此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 |
|
inline-table |
此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。 |
|
table-row-group |
此元素会作为一个或多个行的分组来显示（类似 <tbody>）。 |
|
table-header-group |
此元素会作为一个或多个行的分组来显示（类似 <thead>）。 |
|
table-footer-group |
此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。 |
|
table-row |
此元素会作为一个表格行显示（类似 <tr>）。 |
|
table-column-group |
此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。 |
|
table-column |
此元素会作为一个单元格列显示（类似 <col>） |
|
table-cell |
此元素会作为一个表格单元格显示（类似 <td> 和 <th>） |
|
table-caption |
此元素会作为一个表格标题显示（类似 <caption>） |
|
inherit |
规定应该从父元素继承 display 属性的值。 |
通过上面的设置就可以让同级节点平铺显示了的！具体的样式可以自己调整宽度和节点的固定宽度值来加以控制！
时间： 2024-10-24 02:06:27