代码：
天云平台
档案类
档案
档案
档案
档案
搜索类
搜索
搜索
搜索
搜索
分析类
分析
分析
分析
分析
上面是从网上找的纵向树，但是不符合项目要求，所以想改成横向向右展开的树，求大神帮忙修改一下，不甚感激，谢谢~~~急~~
组织架构图类似：
回复讨论(解决方案)
我也需要，谢谢，做网站
弄了个你可以看看，通过json数据生成。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>无标题页</title> <style type="text/css"> .htree{ margin:0; padding:0; font-size:14px; } .leaf { border: solid 1px red; height:23px; line-height:23px; margin: 3px 0; padding:0 3px; position:relative; display:inline-block; *display:inline; zoom:1; } .parent { margin: 4px 0 4px 1px; position:relative; } .node{ width:14px; word-break:break-all; border:solid 1px blue; padding:15px 10px; } .hline{ height:1px; width:23px; background:#ccc; font-size:0; overflow:hidden; position:absolute; top:50%; } .hline_r{ left:36px; } .hline_l{ left:-23px; } .vline{ width:1px; background:#ccc; position:absolute; font-size:0; overflow:hidden; left:-23px; } .vline_t{ height:50%; top:50%; } .vline_diff{ height:8px; bottom:-8px; } .vline_m{ height:100%; top:0; } .vline_b{ height:50%; top:0; } </style> <script type="text/javascript"> function createTree(obj, lev, pidx, plen, htmlArr) { var childs = obj.childs ? obj.childs : []; htmlArr.push("<div class=\"parent\">"); if (lev == 1) { htmlArr.push("<div class=\"hline hline_r\"></div>"); } else { htmlArr.push("<div class=\"hline hline_l\"></div>"); if (childs.length > 0) htmlArr.push("<div class=\"hline hline_r\"></div>"); if (pidx == 0 && plen != 1) htmlArr.push("<div class=\"vline vline_t\"></div>"); if (pidx != 0 && pidx != plen - 1) htmlArr.push("<div class=\"vline vline_m\"></div>"); if (pidx != plen - 1) htmlArr.push("<div class=\"vline vline_diff\"></div>"); if (pidx == plen - 1 && pidx != 0) htmlArr.push("<div class=\"vline vline_b\"></div>"); } htmlArr.push("<table cellpadding=\"0\" cellspacing=\"0\">"); htmlArr.push(" <tr>"); htmlArr.push(" <td style=\"width:80px;\">"); htmlArr.push(" <div class=\"node\">" + obj.name + "</div>"); htmlArr.push(" </td>"); if (childs.length > 0) { htmlArr.push(" <td>"); var len = childs.length; for (var i = 0; i < len; i++) { var tempObj = childs[i]; if (tempObj.leaf !== true) { createTree(tempObj, lev + 1, i, len, htmlArr) } else { htmlArr.push(" <div>"); htmlArr.push(" <div class=\"leaf\">"); htmlArr.push(" <div class=\"hline hline_l\" " + (i == 0 && len == 1 ? "style=\"*margin-top:-1px;\"" : "") + "></div>"); /*ie7 hack*/ if (i == 0 && len != 1) htmlArr.push(" <div class=\"vline vline_t\"></div>"); if (i != 0 && i != len - 1) htmlArr.push(" <div class=\"vline vline_m\"></div>"); if (i != len - 1) htmlArr.push(" <div class=\"vline vline_diff\"></div>"); if (i == len - 1 && i != 0) htmlArr.push(" <div class=\"vline vline_b\"></div>"); htmlArr.push(" " + tempObj.name); htmlArr.push(" </div>"); htmlArr.push(" </div>"); } } htmlArr.push(" </td>"); } htmlArr.push(" </tr>"); htmlArr.push("</table>"); htmlArr.push("</div>"); } 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(""); } </script></head><body>不支持ie6<br /><input type="button" value="生成" onclick="create();"/><div id="div_test" style="border:solid 1px red;"></div></body></html> 无聊做了一下，具体查看博客 html模拟组织架构横向展开
3楼的哥哥
我看了你的代码，如果我这颗是动态生成的，你的这个节点好像不能自动居中，怎么破？
我想要的样式
我想要的样式
你现在要的只有第一个节点文字是纵向排列的？ 这个图和你发帖时候的图弄起来结构可是不同的。
我想要的样式
你现在要的只有第一个节点文字是纵向排列的？ 这个图和你发帖时候的图弄起来结构可是不同的。
是的，只有第一个节点文字是纵向排列的
我想要的样式
你现在要的只有第一个节点文字是纵向排列的？ 这个图和你发帖时候的图弄起来结构可是不同的。
是的，只有第一个节点文字是纵向排列的
你要不就先用我原来的竖排吧，你这个效果的暂时没写出来。
陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
HTML文檔中的根標籤是什麼？Apr 29, 2025 am 12:10 AMtheroottaginanhtmldocumentis.servesasthetop-levellementThateNcapsulatesAllotherContent，確保properdocumentstrumentstrumentsureandbrowserparserparsing。
HTML標籤和元素是同一件事嗎？Apr 28, 2025 pm 05:44 PM文章解釋說，HTML標籤是用於定義元素的語法標記，而元素是完整的單位，包括標籤和內容。他們一起工作以構建網頁。查拉克計數：159
＆lt; head＆gt;的意義是什麼。 ＆＆lt;身體＆gt;在html中標記？Apr 28, 2025 pm 05:43 PM本文討論了Lt; Head＆gt; ＆＆lt;身體＆gt; HTML中的標籤，它們對用戶體驗的影響以及SEO的影響。正確的結構增強了網站功能和搜索引擎優化。
＆lt; strong＆gt;，lt; b＆gt;有什麼區別標籤和lt; em＆gt;，＆lt; i＆gt;標籤？Apr 28, 2025 pm 05:42 PM本文討論了HTML標籤，和和關注其語義與表現用途及其對SEO和可訪問性的影響之間的差異。
請說明如何指示HTML中文檔使用的字符集？Apr 28, 2025 pm 05:41 PM文章討論了在HTML中指定字符，重點介紹了UTF-8。主要問題：確保正確顯示文本，防止亂七八糟的字符，並增強SEO和可訪問性。
HTML中的各種格式標籤是什麼？Apr 28, 2025 pm 05:39 PM本文討論了用於構建和造型Web內容的各種HTML格式標籤，強調了它們對文本外觀的影響以及語義標籤對可訪問性和SEO的重要性。
HTML元素的' ID”屬性與'類”屬性之間有什麼區別？Apr 28, 2025 pm 05:39 PM本文討論了HTML的“ ID”和“類”屬性之間的差異，重點是它們的獨特性，目的，CSS語法和特異性。它解釋了它們的使用如何影響網頁樣式和功能，並為
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前ByDDD
如何修復KB5055523無法在Windows 11中安裝？
2 週前ByDDD
Inzoi：如何申請學校和大學
3 週前ByDDD
如何修復KB5055518無法在Windows 10中安裝？
2 週前ByDDD
Roblox：Dead Rails - 如何召喚和擊敗Nikola Tesla
4 週前By尊渡假赌尊渡假赌尊渡假赌
熱工具
Dreamweaver Mac版
視覺化網頁開發工具
mPDF
mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），
SublimeText3 Linux新版
SublimeText3 Linux最新版
Atom編輯器mac版下載
最受歡迎的的開源編輯器
PhpStorm Mac 版本
最新（2018.2.1 ）專業的PHP整合開發工具
