时间戳

首页 > 解决方案 > HTML中同一项目符号中的段落之间的垂直分隔

html - HTML中同一项目符号中的段落之间的垂直分隔

问题描述

我以纯文本格式记笔记并将它们视为 HTML。当我写一个列表（无论是有序的还是无序的）时，有时我会在同一个要点中写两段。在 HTML 显示中，这些段落看起来非常接近。如何修改.css模板文件以增加它们之间的垂直间距？

我这是由元素控制的，li但我不知道如何精确调整它们。以下是这些元素的当前代码。olul

p, table, ul, ol, dl {margin-top: 1.5em; margin-bottom: 1.5em;}
ul ul, ul ol, ol ol, ol ul {margin-top: 0.5em; margin-bottom: 0.5em;}
li {margin: 1.5em auto; padding: 50px 0px;}
ul {margin-left: 2em; padding-left: 0.5em;}

ol {
  margin:0 0 1.5em;
  padding:0;
  counter-reset:item;
}

ol>li {
  margin:0;
  padding:0 0 0 2em;
  text-indent:-2em;
  list-style-type:none;
  counter-increment:item;
}

ol>li:before {
  display:inline-block;
  width:1.5em;
  padding-right:0.5em;
  font-weight:bold;
  text-align:right;
  content:counter(item) ".";
}

标签： htmlcsslayout

解决方案

对于项目符号中的段落之间的分隔，特别是：

只是这样做没有什么不同，例如：

li + li{
  margin-top: 60px; /*as per requirement*/
}
<ol>
  <li>It is a long established fact that a reader will be </li>
  <li>It is a long established fact that a reader will be </li>
</ol>

此外，如果您在一个页面中有许多项目符号列表，那么未来可能会出现问题，因此只需为您的项目符号列表标签创建一个 id，您将全部设置好，例如：

#first li + li{
  margin-top: 60px; /*as per requirement*/
}
<ol id="first">
  <li>It is a long established fact that a reader will be </li>
  <li>It is a long established fact that a reader will be </li>
</ol>

推荐阅读