CSS溢出，我想要

Question

我有一个简单的sheet样式，开发来展示一棵树。每个 sheet 可以有多个或任何 child.

少量节点样式sheet表现良好，但大量行为不正确。

节点较少的树示例（正常工作）：

节点多的树示例（故障，可以看看树是怎么被砍掉跳下来的）：

如果我将 div 宽度强制为特定宽度，我会得到我想要的结果，但我需要该机制是自动的，并且如果可能的话保持纯粹的 CSS。示例树运行良好，宽度手动设置：

更具体地说，我寻求无论屏幕大小如何，树的宽度都是自动的，并且必须使用滚动才能完全看到它。标签的内容可以有不同的长度，所以它的大小是 self-adjusting.

这是我的风格sheet，还有一个示例树：

* {margin: 0; padding: 0;}

/*.tree{width:3000px; margin:40px auto 0 auto}*/

.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;
 list-style-type: none;
 position: relative;
 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{
 content: '';
 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 {
 display: none;
}

/*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{
 content: '';
 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;
 text-decoration: none;
 color: #666;
 font-family: arial, verdana, tahoma;
 font-size: 11px;
 display: inline-block;
 
 border-radius: 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>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name = "viewport" content="width = device-width">
    <title>tree</title>
  </head>
  <body>
    <div class="tree">
      <ul>
        <li>
          <a href="#">0</a>
          <ul>
            <li>
              <a href="#">1</a>
              <ul>
                <li>
                  <a href="#">4</a>
                  <ul>
                    <li>
                      <a href="#">9</a>
                      <ul>
                        <li>
                          <a href="#">19</a>
                          <ul>
                            <li>
                              <a href="#">38</a>
                            </li>
                            <li>
                              <a href="#">39</a>
                            </li>
                          </ul>
                        </li>
                        <li>
                          <a href="#">20</a>
                          <ul>
                            <li>
                              <a href="#">40</a>
                            </li>
                            <li>
                              <a href="#">41</a>
                            </li>
                          </ul>
                        </li>
                        <li>
                          <a href="#">21</a>
                          <ul>
                            <li>
                              <a href="#">42</a>
                            </li>
                            <li>
                              <a href="#">43</a>
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#">10</a>
                      <ul>
                        <li>
                          <a href="#">22</a>
                        </li>
                        <li>
                          <a href="#">23</a>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#">11</a>
                      <ul>
                        <li>
                          <a href="#">24</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">5</a>
                  <ul>
                    <li>
                      <a href="#">12</a>
                      <ul>
                        <li>
                          <a href="#">25</a>
                        </li>
                        <li>
                          <a href="#">26</a>
                        </li>
                        <li>
                          <a href="#">27</a>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#">13</a>
                      <ul>
                        <li>
                          <a href="#">28</a>
                        </li>
                        <li>
                          <a href="#">29</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">6</a>
                  <ul>
                    <li>
                      <a href="#">14</a>
                      <ul>
                        <li>
                          <a href="#">30</a>
                        </li>
                        <li>
                          <a href="#">31</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">2</a>
              <ul>
                <li>
                  <a href="#">7</a>
                  <ul>
                    <li>
                      <a href="#">15</a>
                      <ul>
                        <li>
                          <a href="#">32</a>
                        </li>
                        <li>
                          <a href="#">33</a>
                        </li>
                        <li>
                          <a href="#">34</a>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#">16</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">3</a>
              <ul>
                <li>
                  <a href="#">8</a>
                  <ul>
                    <li>
                      <a href="#">17</a>
                      <ul>
                        <li>
                          <a href="#">35</a>
                        </li>
                        <li>
                          <a href="#">36</a>
                        </li>
                        <li>
                          <a href="#">37</a>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#">18</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </body>
</html>

感谢您花时间帮助我。提前致谢。

Answer 1

改变

/*.tree{width:3000px; margin:40px auto 0 auto}*/

到

.tree{
    width: 2000px; 
    margin: 40px auto 0 auto;
    overflow-x: scroll;
    overflow-y: hidden;
}

随着树中节点的增长调整width。

* {margin: 0; padding: 0;}

.tree{width: 2000px; margin:40px auto 0 auto;overflow-x: scroll;
overflow-y: hidden;}

.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;
 list-style-type: none;
 position: relative;
 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{
 content: '';
 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 {
 display: none;
}

/*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{
 content: '';
 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;
 text-decoration: none;
 color: #666;
 font-family: arial, verdana, tahoma;
 font-size: 11px;
 display: inline-block;
 
 border-radius: 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;
}

<body>
<div >

    <div class="tree">
      <ul>
        <li>
          <a href="#">0</a>
          <ul>
            <li>
              <a href="#">1</a>
              <ul>
                <li>
                  <a href="#">4</a>
                  <ul>
                    <li>
                      <a href="#">9</a>
                      <ul>
                        <li>
                          <a href="#">19</a>
                          <ul>
                            <li>
                              <a href="#">38</a>
                            </li>
                            <li>
                              <a href="#">39</a>
                            </li>
                          </ul>
                        </li>
                        <li>
                          <a href="#">20</a>
                          <ul>
                            <li>
                              <a href="#">40</a>
                            </li>
                            <li>
                              <a href="#">41</a>
                            </li>
                          </ul>
                        </li>
                        <li>
                          <a href="#">21</a>
                          <ul>
                            <li>
                              <a href="#">42</a>
                            </li>
                            <li>
                              <a href="#">43</a>
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#">10</a>
                      <ul>
                        <li>
                          <a href="#">22</a>
                        </li>
                        <li>
                          <a href="#">23</a>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#">11</a>
                      <ul>
                        <li>
                          <a href="#">24</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">5</a>
                  <ul>
                    <li>
                      <a href="#">12</a>
                      <ul>
                        <li>
                          <a href="#">25</a>
                        </li>
                        <li>
                          <a href="#">26</a>
                        </li>
                        <li>
                          <a href="#">27</a>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#">13</a>
                      <ul>
                        <li>
                          <a href="#">28</a>
                        </li>
                        <li>
                          <a href="#">29</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">6</a>
                  <ul>
                    <li>
                      <a href="#">14</a>
                      <ul>
                        <li>
                          <a href="#">30</a>
                        </li>
                        <li>
                          <a href="#">31</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">2</a>
              <ul>
                <li>
                  <a href="#">7</a>
                  <ul>
                    <li>
                      <a href="#">15</a>
                      <ul>
                        <li>
                          <a href="#">32</a>
                        </li>
                        <li>
                          <a href="#">33</a>
                        </li>
                        <li>
                          <a href="#">34</a>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#">16</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">3</a>
              <ul>
                <li>
                  <a href="#">8</a>
                  <ul>
                    <li>
                      <a href="#">17</a>
                      <ul>
                        <li>
                          <a href="#">35</a>
                        </li>
                        <li>
                          <a href="#">36</a>
                        </li>
                        <li>
                          <a href="#">37</a>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#">18</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    </div>
  </body>

Answer 2

99% 的解决方案：

给 DIV 一个实际宽度 - 其父级的 100%。

div.tree {
  margin:40px auto 0 auto;
  width:100%;
  overflow-x:auto; 
}

似乎是 UL 正在包装其内容。使用 nowrap 停止白色 space 换行。

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

最后将 LI 转换为块显示，阻止它们向左浮动，并修复丢失的左浮动，将它们与容器顶部对齐。

.tree li {
  display:inline-block;
  vertical-align:top;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0 5px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

缺失的 1% 是水平线之间的几个像素间隙。不知道如何关闭它。边距和填充也许？我似乎无法管理它。

在 FireFox Win7 64 上测试

CSS溢出，我想要

CSS Overflow, i want it

html

css

tree

list

overflow