html - 减少多级列表中的缩进

Question

我正在构建的网站中有一个导航 Pane ，并且有多个导航级别。有什么方法可以让我的导航 Pane 第二层的缩进变小吗？

这是我代码的重要部分:

<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 {
  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>