减少多级列表中的缩进

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 or a use an existing boilerplate CSS like 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>

减少多级列表中的缩进

Lessen the indent in a multi-level list

html

css

indentation

html-lists