Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

html - CSS 不适用于组织结构图(使用 ul 和 li 构建)

In lại Tác giả: Walker 123 更新时间：2023-11-28 14:56:24 25 4
mua khóa gpt4 Nike

我正在使用 html 和 css 创建组织结构图，但图表右侧的格式不正确。销售、生产 1、生产 2 应该属于联席主管，但它位于左侧列表下方。右侧连接器也未正确连接。

我的图表应该是这样的

                        Director
                             |
    (1)Joint Director(Account) (2)Joint Director
                |
(1)Accountant1 (2)Accountant2 (1)Sales (2)Production1 (3)Production3
                                          |
                                (1)Sales1 (2)Sales2 (3)Sales3

但它看起来像这样: https://smilestechno.000webhostapp.com/My/tree.html

HTML

CSS

* {margin: 0; padding: 0;}

.tree ul {
padding-top: 20px; position: relative;

transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}

.tree li {
float: left; text-align: center;
kiểu danh sách: không có;
vị trí: tương đối;
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{
nội dung: '';
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 {
hiển thị: không có;
 }

 /*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{
nội dung: '';
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;
trang trí văn bản: không có;
màu sắc: #666;
font-family: arial, verdana, tahoma;
font-size: 11px;
hiển thị: khối nội tuyến;

bán kính đường viền: 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;
}

câu trả lời hay nhất

您不能将另一个 ul 作为 ul 的子级。正确的结构是


      

  •     

            

    •


Answer

 ...
 
  • Joint Director 
         
       
    •  
       ...

    Snipplet

    * {margin: 0; padding: 0;}

    .tree { 
      width: 100%; height: auto; display: flex; justify-content: center;
    }

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

    .tree li {
      float: left; text-align: center;
      kiểu danh sách: không có;
      vị trí: tương đối;
      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{
      nội dung: '';
      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 {
      hiển thị: không có;
    }

    /*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{
      nội dung: '';
      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;
      trang trí văn bản: không có;
      màu sắc: #666;
      font-family: arial, verdana, tahoma;
      font-size: 11px;
      hiển thị: khối nội tuyến;
      bán kính đường viền: 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;
    }

    关于html - CSS 不适用于组织结构图(使用 ul 和 li 构建)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50832129/

    25 4 0
    Đề xuất bài viết: javascript - 不同编程语言中的所有文件路径是否都遵循相同的原则/约定
    Đề xuất bài viết: javascript - 为什么我的 Javascript 内容在网页中不可见
    Đề xuất bài viết: html - 背景标签 HTML application.html.erb
    Đề xuất bài viết: javascript - 单击按钮本身不会播放视频
    Walker 123
    Hồ sơ

    Tôi là một lập trình viên xuất sắc, rất giỏi!

    Nhận phiếu giảm giá taxi Didi miễn phí
    Phiếu giảm giá taxi Didi
    Các bài viết phổ biến trên toàn bộ trang web
    Chứng chỉ ICP Bắc Kinh số 000000
    Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
    Xem sitemap của VNExpress