Html css ul list连接中断

Question

问题是它应该像这样显示

                 1
  2                              3
4   5                          6   7

但它打破了界限。我该怎么办？我试过了：

overflow-x:scroll/hidden;
width:auto/100%;
display:inline/inline-block;

在所有组合中，它不适用于my fiddle

这个想法是它应该是一个水平滚动条。还要调整结果窗口的大小以查看连接器是否断开。

HTML

<div id="tree" class="tree">
  <ul id="1">
    <li>
      <a href="#" class="you">#1</a>
        <ul id="2">
          <li>
            <a href="#" class="woman">#2</a>
            <ul id="3">
              <li>
                <a href="#" class="woman">#4</a>
              </li>
              <li>
                <a href="#" class="man">#5</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#" class="man">#3</a>
            <ul id="3">
              <li>
                <a href="#">#6</a>
              </li>
              <li>
                <a href="#">#7</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>

CSS

* { 
  margin: 0; 
  padding: 0;
}

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

.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;
}

.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;
}

.tree li:only-child::after, 
.tree li:only-child::before {
  display: none;
}

.tree li:only-child{ 
   padding-top: 0;
 }

.tree li:first-child::before, 
.tree li:last-child::after {
    border: 0 none;
}

.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;
}

.tree ul ul::before {
  content: '';
  position: absolute; top: 0; left: 50%;
  border-left: 1px solid #ccc;
  width: 0; height: 20px;
}

Answer 1

RaduAndrei在评论中给出了问题的答案：

  

嗯..将“position：absolute; min-width：1000px”添加到div＃tree中？现在，如果宽度是动态的 - 这是一个泡菜，但你可以用JS来计算合适的宽度。

CSS

.tree { 
  position: absolute;
  min-width: 1000px
}