减少多级列表中的缩进

Question

我正在建立的网站中有一个导航窗格，我有多个级别的导航。有没有办法让我在导航窗格的第二级缩进更小？

这是我的代码的重要部分：

<style>
        div.sidebarOne {
    	    background-color: rgba(64, 224, 208, 0.50); 
    	    position: absolute;
    	    top: 0; 
    	    bottom: -3000px; 
    	    left: 1px;
    	    width: 270px;
    	    margin: 0 auto;
    	    clear: all;
    	    padding-left: 5px;
        }
        li		{
    	    color: goldenrod;
    	    size: 20px;
    	    font-family: Bellota-Light;
    	    word-spacing: 5px;
        }
        li.sidebar		{
    	    color: darkred;
    	    size: 20px;
    	    font-family: Bellota-Light;
    	    word-spacing: 5px;
        }
</style>

<aside>
 <div class="sidebarOne"> <!-- the sidebar on the right -->
<h1 format="title"> Contents </h1>
  <ul>
   <li class="sidebar">Inquiry and Analysis</li>
    <ul>
    	<li class="sidebar"><a href="../Other Pages/Page_2_mindmap.html"> My MindMaps </a> </li>
    	<li class="sidebar"><a href="../Other Pages/Page_3_narrowedmindmap.html"> My Research Topic </a> </li>
    	<li class="sidebar"><a href="../Other Pages/Page_4_questions.html">Some Questions</a> </li>
    	<li class="sidebar"><a href="../Other Pages/Page_5_pre-existingsites.html">Analysis of other websites</a> </li>
    	<li class="sidebar"><a href="../index.html">Home</a></li>
    </ul>
   <li class="sidebar">Developing Ideas</li>
   <li class="sidebar">Creating a Solution</li>
   <li class="sidebar">Evaluating</li>
  </ul>
 </div>
</aside>

侧边栏位于<div class="sidebar.one">
我只是想补充一点，我宁愿不将其更改为nav标记。

Answer 1

在嵌套<ul>时，您需要将其与父<li>保持一致。

<li>Some Text
    <ul>
        <li>Some Other Text</li>
    </ul>
</li>

.sidebar ul {
    padding-left: 10px;
}

作为旁注，使用浏览器应用的默认边距和填充时要小心，它们并不总是相同。使用reset stylesheet或使用现有样板CSS（如Skeleton）为表单元素，网格等提供基本样式。

Answer 2

列表默认内置填充，因此通常最好使用以下命令重置这些：

ul {
  padding:0;
}

然后直接应用您需要的任何填充。在这里，我完全删除了它......

<style> div.sidebarOne {
  background-color: rgba(64, 224, 208, 0.50);
  position: absolute;
  top: 0;
  bottom: -3000px;
  left: 1px;
  width: 270px;
  margin: 0 auto;
  clear: all;
  padding-left: 5px;
}
ul {
  padding: 0;
}
li {
  color: goldenrod;
  size: 20px;
  font-family: Bellota-Light;
  word-spacing: 5px;
}
li.sidebar {
  color: darkred;
  size: 20px;
  font-family: Bellota-Light;
  word-spacing: 5px;
}
</style>

<aside>
  <div class="sidebarOne">
    <!-- the sidebar on the right -->
    <h1 format="title"> Contents </h1>
    <ul>
      <li class="sidebar">Inquiry and Analysis</li>
      <ul>
        <li class="sidebar"><a href="../Other Pages/Page_2_mindmap.html"> My MindMaps </a> 
        </li>
        <li class="sidebar"><a href="../Other Pages/Page_3_narrowedmindmap.html"> My Research Topic </a> 
        </li>
        <li class="sidebar"><a href="../Other Pages/Page_4_questions.html">Some Questions</a> 
        </li>
        <li class="sidebar"><a href="../Other Pages/Page_5_pre-existingsites.html">Analysis of other websites</a> 
        </li>
        <li class="sidebar"><a href="../index.html">Home</a>
        </li>
      </ul>
      <li class="sidebar">Developing Ideas</li>
      <li class="sidebar">Creating a Solution</li>
      <li class="sidebar">Evaluating</li>
    </ul>
  </div>
</aside>