Question

我正在尝试在纯CSS中创建一个自包含的可折叠HTML列表。它目前基于这篇文章：http://www.thecssninja.com/css/css-tree-menu。

我调整了演示以满足我的需求（例如，仅使用+/-按钮折叠/展开）。不幸的是，我无法摆脱（不需要的？）<span>元素，因为它会弄乱标签位置。

以下是我目前使用的代码：

<ul class="tree">
  <li><span>Root</span><input type="checkbox"/>
    <ul>
      <li class="lib"><span>Sub1</span><input type="checkbox"><ul>
        <li class="itm">Item1
        <li class="itm">Item2
      </ul></li>
      <li><span>Sub2</span><input type="checkbox"><ul>
        <li class="itm">Item1</li>
      </ul></li>
      <li><span>Sub3</span><input type="checkbox"><ul>
        <li class="itm">Item1</li>
      </ul></li>
    </ul>
  </li>
</ul>

这里有完整的示例，但没有<span>元素，其中复选框隐藏在混乱的标签后面：

＆＃13;

ul.tree {
  padding: 0 0 0 30px
}
li {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA1BMVEXDw8PWKQJEAAAAC0lEQVR4XmMgEQAAADAAAYFIpkQAAAAASUVORK5CYII=) 15px 1px no-repeat;
  position: relative;
  margin-left: -15px;
  list-style: none
}
li.itm {
  margin-left: -1px !important;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA1BMVEXDw8PWKQJEAAAAC0lEQVR4XmMgEQAAADAAAYFIpkQAAAAASUVORK5CYII=) 0 0 no-repeat;
  padding-left: 21px
}
li input {
  position: absolute;
  left: 0;
  margin-left: 0;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
  height: 1em;
  width: 1em;
  top: 0
}
li input + ul {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAgMAAACd/+6DAAAACVBMVEX///+AgIAAAAA8XrssAAAAGUlEQVR4XmMIDXVgAMMGCPZagWCDYGioAwCQxAgHBIBVQwAAAABJRU5ErkJggg==) 44px 0 no-repeat;
  margin: -0.938em 0 0 -44px;
  height: 1em
}
li input + ul > li {
  display: none;
  margin-left: -14px !important;
  padding-left: 1px
}
li span {
  display: block;
  padding-left: 37px
}
li input:checked + ul {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAgMAAACd/+6DAAAACVBMVEX///+AgIAAAAA8XrssAAAAFUlEQVR4XmMIDXVgQIZeK1D5oaEOAGzEBgf+DZdOAAAAAElFTkSuQmCC) 44px 5px no-repeat;
  margin: -1.25em 0 0 -44px;
  padding: 1.563em 0 0 80px;
  height: auto
}
li input:checked + ul > li {
  display: block;
  margin: 0 0 0.125em
}
li input:checked + ul > li:last-child {
  margin: 0 0 0.063em
}

＆＃13;

<ul class="tree">
  <li>Root
    <input type="checkbox" checked/>
    <ul>
      <li class="lib">Sub1
        <input type="checkbox" checked/>
        <ul>
          <li class="itm">Item1
            <li class="itm">Item2
        </ul>
        </li>
        <li>Sub2
          <input type="checkbox" checked/>
          <ul>
            <li class="itm">Item1</li>
          </ul>
        </li>
        <li>Sub3
          <input type="checkbox" checked/>
          <ul>
            <li class="itm">Item1</li>
          </ul>
        </li>
    </ul>
    </li>
</ul>

＆＃13;

编辑：最终结果应如下所示：

我已经尝试过自己调整CSS，但是如果不弄乱崩溃功能和/或列表层次结构，我就无法正确调整CSS。

我需要在CSS中更改哪些内容才能正确布局列表项标签？这甚至可能，或者我是否需要某种能够定位标签的HTML元素？

Answer 1

从此更新您的CSS

ul.tree {
        padding: 0 0 0 30px;
    }

    li {
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA1BMVEXDw8PWKQJEAAAAC0lEQVR4XmMgEQAAADAAAYFIpkQAAAAASUVORK5CYII=) 16px 2px no-repeat;
        position: relative;
        list-style: none;
        padding-left:37px;
    }

        li.itm {
            margin-left: -1px !important;
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA1BMVEXDw8PWKQJEAAAAC0lEQVR4XmMgEQAAADAAAYFIpkQAAAAASUVORK5CYII=) 0 0 no-repeat;
            padding-left: 21px;
        }

        li input {
            position: absolute;
            left: 0;
            margin-left: 0;
            opacity: 0;
            z-index: 2;
            cursor: pointer;
            height: 1em;
            width: 1em;
            top: 0;
        }

            li input + ul {
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAgMAAACd/+6DAAAACVBMVEX///+AgIAAAAA8XrssAAAAGUlEQVR4XmMIDXVgAMMGCPZagWCDYGioAwCQxAgHBIBVQwAAAABJRU5ErkJggg==) 8px 0 no-repeat;
                margin: -0.938em 0 0 -44px;
                height: 1em;
            }

                li input + ul > li {
                    display: none;
                }

        li span {
            display: block;
            padding-left: 37px;
        }

        li input:checked + ul {
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAgMAAACd/+6DAAAACVBMVEX///+AgIAAAAA8XrssAAAAFUlEQVR4XmMIDXVgQIZeK1D5oaEOAGzEBgf+DZdOAAAAAElFTkSuQmCC) 8px 6px no-repeat;
            margin: -1.25em 0 0 -44px;
            padding: 1.563em 0 0 50px;
            height: auto;
        }

            li input:checked + ul > li {
                display: block;
                margin: 0 0 0.125em;
            }

                li input:checked + ul > li:last-child {
                    margin: 0 0 0.063em;
                }

纯CSS可折叠列表与图标

1 个答案: