web前端|html教程
现,横向,大神,纵向,展开
web前端-html教程
代码：
易语言笔记本源码,vscode格式化功能失效,ubuntu 查看显存,更改tomcat版本操作,曲阜爬虫店,杭州php怎么样,seo排名优化课程霸屏,最新小说网站模板lzw
body {
font: 12px/ 1.8 “宋体”;
position: relative;
}
jQuery的ajax源码,vscode同步滚动,ubuntu开放22端口,免tomcat,sqlite 海量数据,foxmail发送服务器设置,黑月插件教程,前端ag框架1,cheerio 爬虫,php登录注册完整代码,网站优化seo入门,vc开源网站,国外网页设计工作室,wordpress 相册模板,单页面模板修改不了了,wap网站管理系统,winpcap抓包程序代码lzw
html,body {
height: 100%;
overflow-y: hidden;
margin: 0;
padding: 0;
overflow: auto;
}
客网站源码,vscode json高亮,ubuntu21.10桌面美化,tomcat部署安装,读取sqlite表名称,jquery图表图形插件,如何使用前端框架做简历,excel爬虫爬取视频,php典型模块大全,宁德seo软文,免费网站系统,自适应浏览器网页制作,中文家庭生活网站模板lzw
.strt-wrap {
width: 20000px;
margin: 2px auto;
}
.strt-part {
text-align: center;
float: left;
position: relative;
}
.strt-part .line-v {
position: relative;
height: 40px;
width: 100%;
}
.strt-part .line-v span {
display: block;
background: #ccc;
position: absolute;
top: 0;
font-size: 0;
line-height: 1px;
width: 1px;
height: 40px;
left: 50%;
}
.strt-name {
display: inline-block;
padding: 0 5px;
height: 24px;
line-height: 24px;
border: 1px solid #ccc;
margin: 0 10px;
border-radius: 3px;
background: #f8f8f8;
}
.strt-part .line-h {
height: 1px;
display: block;
background: #ccc;
position: absolute;
top: 0;
font-size: 0;
}
.strt-part .line-h-l {
width: 50%;
left: 0;
}
.strt-part .line-h-c {
width: 100%;
left: 0;
}
.strt-part .line-h-r {
width: 50%;
right: 0;
}
.strt-block {
float: inherit;
}
天云平台
档案类
档案
档案
档案
档案
搜索类
搜索
搜索
搜索
搜索
分析类
分析
分析
分析
分析
上面是从网上找的纵向树，但是不符合项目要求，所以想改成横向向右展开的树，求大神帮忙修改一下，不甚感激，谢谢~~~急~~
组织架构图类似：
回复讨论(解决方案)
我也需要，谢谢，做网站
弄了个你可以看看，通过json数据生成。
"); if (lev == 1) {htmlArr.push("
"); } else {htmlArr.push("
");if (childs.length > 0) htmlArr.push("
");if (pidx == 0 && plen != 1) htmlArr.push("
");if (pidx != 0 && pidx != plen - 1) htmlArr.push("
");if (pidx != plen - 1) htmlArr.push("
");if (pidx == plen - 1 && pidx != 0) htmlArr.push("
"); } htmlArr.push(""); htmlArr.push("
");} function create() { var obj = {name: "组织架构1",childs: [ { name: 员工1, leaf: true }, { name: 员工2, leaf: true }, { name: 组织架构2, childs: [ {name: 员工3,leaf: true }, {name: 员工4,leaf: true }, {name: 组织架构4,childs: [ { name: 员工5, leaf: true }, { name: 员工6, leaf: true }] } ] }, { name: 组织架构3, childs: [ {name: 组织架构5,childs: [ { name: 员工8, leaf: true }] }, {name: 员工7,leaf: true } ] }, { name: 组织架构33 }] }; var htmlArr = []; createTree(obj, 1, 0, 0, htmlArr); document.getElementById("div_test").innerHTML = htmlArr.join(""); } 不支持ie6
无聊做了一下，具体查看博客 html模拟组织架构横向展开
3楼的哥哥
我看了你的代码，如果我这颗是动态生成的，你的这个节点好像不能自动居中，怎么破？
我想要的样式
我想要的样式
你现在要的只有第一个节点文字是纵向排列的？ 这个图和你发帖时候的图弄起来结构可是不同的。
我想要的样式
你现在要的只有第一个节点文字是纵向排列的？ 这个图和你发帖时候的图弄起来结构可是不同的。
是的，只有第一个节点文字是纵向排列的
我想要的样式
你现在要的只有第一个节点文字是纵向排列的？ 这个图和你发帖时候的图弄起来结构可是不同的。
是的，只有第一个节点文字是纵向排列的
你要不就先用我原来的竖排吧，你这个效果的暂时没写出来。
