CSS橫向樹型圖是一種基于HTML和CSS的數據展示方式，通常用于顯示層級結構關系。本篇文章將介紹如何使用CSS實現橫向樹型圖。

/* CSS樣式代碼 */
.tree {
display: flex; /* 設置容器為flex布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
flex-wrap: wrap; /* 防止子元素換行 */
width: 100%; /* 設置寬度 */
height: 100%; /* 設置高度 */
margin: 0; /* 去除容器默認邊距 */
padding: 0;
font-size: 16px;
}
.tree li {
position: relative; /* 設置定位為相對定位 */
list-style: none; /* 去除默認樣式 */
text-align: center;
flex: 1 0 20%; /* 設置子元素寬度 */
max-width: 200px;
padding: 10px;
box-sizing: border-box;
}
.tree li:before {
content: ''; /* 引入偽元素 */
position: absolute; /* 設置定位為絕對定位 */
top: 50%; /* 設置線條起點垂直居中 */
left: 0;
border: 1px solid #ccc; /* 設置線條樣式 */
width: 100%;
}
.tree li:after {
content: '';
position: absolute;
top: 0;
left: 50%; /* 設置線條起點水平居中 */
border: 1px solid #ccc;
height: 100%;
}
.tree li:first-child:before,
.tree li:last-child:before,
.tree li:last-child:after {
border: none; /* 去除首尾節點的線條 */
}
.tree ul {
display: flex;
width: 100%;
margin: 0;
padding: 0;
}
.tree ul ul {
justify-content: space-between; /* 設置下一級子元素間距 */
}
.tree li ul li {
flex: 1 0 auto;
max-width: none;
}

以上是CSS樣式代碼。通過對樹型結構的ul、li等標簽進行定位和樣式設置，實現了橫向樹型圖的效果。在實際使用時，我們用HTML標簽表示數據結構，然后在樣式中細調樣式，即可呈現出美觀的橫向樹型圖。