带显示块的ul不占用父元素

Question

我有一个<ul><li>树，可以切换孩子的知名度。 :hover应显示元素的整个宽度。为了说明问题，这些元素具有orange背景色。

现在您将看到最外层的<ul class="tree">不会从父级占用整个空间。

.tree有一些包装因为在现实生活中.tree位于可调整大小的区域内。这也是使用overflow-x: scroll;的原因和

的原因

padding-left: 2000px;
margin-left: -2000px;

再次获得装饰背景色的整个元素。

此外，我需要使用white-space: nowrap;因为每<li>只占用一行，并在宽度上占用所需的空间。

＆＃13;

＆＃13;

.grid {
  width: 200px;
}

.box {
    width: 100%;
    height: 100%;
    overflow-x: scroll;
    border: solid 1px fuchsia;
}

ul.tree {
    display: block;
    width: 100%; /* makes nothing */
    border: solid 1px lime;
}

ul.tree,
ul.tree ul,
ul.tree li {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.tree ul {
    margin: 0 0 0 20px;
}

ul.tree a {
    white-space: nowrap;
    display: block;
    padding: 5px;
    padding-left: 2000px;
    margin-left: -2000px;
    margin-bottom: 5px;
    color: #000;
    background-color: orange;
}

＆＃13;

<div class="grid">
  <div>
    <div class="box">
      <ul class="tree">
        <li>
          <a href="#">xxx</a>
          <ul>
            <li>
              <a href="#">xxx xxx</a>
              <ul>
                <li>
                  <a href="#">xxx xxx xxx</a>
                  <ul>
                    <li>
                      <a href="#">xxx xxx xxx</a>
                      <ul>
                        <li>
                          <a href="#">xxx xxx xxx xxx 123456 7890</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

所以我需要的是橙色，一直到紫红色边框，而不是停在石灰边界停止的地方。我怎样才能做到这一点？

Answer 1

只需在inline-block上使用min-width 100%和ul.tree（它也可以在IE中使用）

＆＃13;

＆＃13;

.grid {
  width: 200px;
}

.box {
  width: 100%;
  height: 100%;
  overflow-x: scroll;
  border: solid 1px fuchsia;
}

ul.tree {
  display: inline-block;
  min-width: 100%;
  border: solid 1px lime;
}

ul.tree,
ul.tree ul,
ul.tree li {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.tree ul {
  margin: 0 0 0 20px;
}

ul.tree a {
  white-space: nowrap;
  display: block;
  padding: 5px;
  padding-left: 2000px;
  margin-left: -2000px;
  margin-bottom: 5px;
  color: #000;
  background-color: orange;
}

＆＃13;

<div class="grid">
  <div>
    <div class="box">
      <ul class="tree">
        <li>
          <a href="#">xxx</a>
          <ul>
            <li>
              <a href="#">xxx xxx</a>
              <ul>
                <li>
                  <a href="#">xxx xxx xxx</a>
                  <ul>
                    <li>
                      <a href="#">xxx xxx xxx</a>
                      <ul>
                        <li>
                          <a href="#">xxx xxx xxx xxx 123456 7890</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以通过简单地使树适合内容宽度

来解决此问题

.grid {
  width: 200px;
}

.box {
    width: 100%;
    height: 100%;
    overflow-x: scroll;
    border: solid 1px fuchsia;
}

ul.tree {
    display: block;
    width: fit-content;
    border: solid 1px lime;
}

ul.tree,
ul.tree ul,
ul.tree li {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.tree ul {
    margin: 0 0 0 20px;
}

ul.tree a {
    white-space: nowrap;
    display: block;
    padding: 5px;
    padding-left: 2000px;
    margin-left: -2000px;
    margin-bottom: 5px;
    color: #000;
    background-color: orange;
}

<div class="grid">
  <div>
    <div class="box">
      <ul class="tree">
        <li>
          <a href="#">xxx</a>
          <ul>
            <li>
              <a href="#">xxx xxx</a>
              <ul>
                <li>
                  <a href="#">xxx xxx xxx</a>
                  <ul>
                    <li>
                      <a href="#">xxx xxx xxx</a>
                      <ul>
                        <li>
                          <a href="#">xxx xxx xxx xxx 123456 7890</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>