如何让包含p元素的ul更紧凑？解决compact属性无效问题

首先明确：compact属性早就被HTML标准废弃，现在浏览器完全不支持，加了也不会生效。要让列表变紧凑，得用CSS直接控制间距，核心要处理两个关键点：

• 每个<li>元素之间的垂直间距
• <li>内部<p>标签自带的底部外边距（这才是导致列表看起来松散的主要原因）

具体实现步骤 #

1. 删掉ul上的compact属性，给ul加一个自定义类名，比如compact-list
2. 编写CSS样式调整间距：

/* 控制li之间的垂直间距，数值可按需调整 */
.compact-list li {
  margin-bottom: 0.25rem;
}

/* 移除p标签默认的底部外边距，消除li内部的多余空白 */
.compact-list .secondary-content {
  margin-bottom: 0;
}

修改后的完整代码示例 #

<main id="main-canvas" style="padding-left: 120px">
  <div class="row">
    <div class="row" style="width:100%">
      <div class="col-9" style="padding-left:0px">
        <div class="row">
          <!-- 移除compact属性，添加自定义类compact-list -->
          <ul class="compact-list" style="padding-left:25px">
            <li><b class="content">123: </b>
              <p class="secondary-content">Lorem</p>
            </li>
            <li><b class="content">456</b>
              <p class="secondary-content"> ipsum dolor sit</p>
            </li>
            <li><b class="content">789</b>
              <p class="secondary-content">amet consecituir or something like that I don't know I don't care</p>
            </li>
          </ul>
        </div>
        <div class="row">
          <h3>Some stuff</h3>
        </div>
        <p class="secondary-content">Some secondary content</p>
      </div>
      <div class="col-3">
        <div class="row">
          <h3 id="sidemenu-h">sidemenu</h3>
        </div>
      </div>
    </div>
  </div>
</main>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">

<style>
.compact-list li {
  margin-bottom: 0.25rem;
}
.compact-list .secondary-content {
  margin-bottom: 0;
}
</style>

你可以根据需求调整margin-bottom的数值，比如改成0就是完全紧贴，调大一点则保留少量空隙。

内容的提问来源于stack exchange，提问作者Swantewit