Question

由于某种原因，我无法在之前的UL LI列表中定位子项目符号。我附上了一张我想要完成的事情。

这是HMTL和CSS标记：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
* {
    font-family: Segoe UI;
    font-size: 9pt;
}
ul.docs {
    list-style-type: none;

    border-left: 1px solid #000;

    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
    margin-left: 10px;

    padding-left: 5px;
}
ul.docs:hover {
    cursor: pointer;
}
ul.docs > li {
  text-indent: -5px;
}
ul.docs > li:before {
  content: "–";
  color: #000;
  padding-right: 5px;
}
span.docicon:before {
    content: url("book library_24x24.png");
}
#doc_input {
    border: 1px solid #000;
}

span.docicon:before {
    content: url("book library_24x24.png");
}

#add_doc:before {
    content: url("add_16x16.png");
}

.folder {
    background: url(folder_16x16.png) no-repeat center left;
    padding-left: 20px;
}

div.folder > li > ul > li:before {
  content: "–";
}


</style>

<script type="text/javascript">

</script>

</head>

<body>

    <div id="wrapper">

        <div style="float: left; margin-right: 10px;">
            <div><input id="doc_input" type="text"></div>
            <span class="docicon"><b>ABC-2016-123456</b></span>
            <ul class="docs">
                <li>documentA</li>
                <li>documentB</li>
                <li>documentC</li>

                <div class="folder"><li>MAIN FOLDER</li></div>
                <ul>
                    <li>document1</li>
                    <li>document2</li>  
                </ul>

            </ul>
        </div>
        <div><b><u>Actions</u></b><br>
            <span id="add_doc">Add</div>
        </div>

    </div>

</body>

</html>

Answer 1

而不是'ul'中的'div'改变它，所以看起来像这样：

<ul class="docs">
   <li>documentA</li>
   <li>documentB</li>
   <li>documentC</li>
   <li>
      <span class="folder">Main Folder</span>
      <ul>
         <li>document1</li>
         <li>document2</li>
      </ul>
   </li>
</ul>

将这些子文件夹的样式放在这些选择器中

ul.docs {}
ul.docs li {} 
ul.docs li span {} <-- add the folder icon style here
ul.docs li ul {} 
ul.docs li ul li {} <-- for the subfolders. This is what you're looking for

从父UL LI列表中定向另一个UL LI列表

1 个答案: