如何删除li元素之间的空格？

24 浏览
0 Comments

如何删除li元素之间的空格？

我有一个包含列表项的部分，我正在努力去除li元素之间的空格，我需要一些帮助。

这是jsfiddle的链接：https://jsfiddle.net/g0z7v394/

这是我想要的效果：

enter image description here

这是我目前的情况：

enter image description here

.main-info {
  background-image: url('https://preview.ibb.co/hZw69K/drone.png');
  background-position: right center;
  background-repeat: no-repeat;
}
ol {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-width: 60%;
  max-height: 600px;
  margin-left: 0;
  padding-left: 0;
  counter-reset: li;
}
ol>li {
  position: relative;
  margin: 21px 0 57px 2em;
  padding: 22px 41px;
  max-width: 50%;
  list-style: none;
}
ol>li::before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  top: -2px;
  left: -2em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  margin-right: 8px;
  padding: 17px;
  border: 1px solid rgb(63, 78, 118);
  background: #fff;
  font-weight: bold;
  font-family: proximaNova;
  text-align: center;
}
li ol,
li ul {
  margin-top: 6px;
}
ol ol li:last-child {
  margin-bottom: 0;
}


    
从空中看大自然

    Mauris consequat libero metus, nec ultricies sem efficitur quis. Integer bibendum eget metus ac accumsan. Integer sit amet lacus egestas, semper est quis, viverra ex.
    
    
      
  1. CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
    2. 
      
  2. CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
    3. 
      
  3. CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
    4. 
      
  4. CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
    5. 
      
  5. CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
    6.

0

2 答案

0 Comments

如何删除li元素之间的空格？

出现的原因是列表项目li的margin属性导致了元素之间的空格。解决方法是调整li元素的padding和margin属性，使用CSS的多列布局来代替flexbox布局。可以设置ol元素的column-count属性来控制列数，然后根据需要调整li元素的padding和margin属性。

以下是具体的代码示例：

ol {
  column-count: 2;
}
ol > li {
  position: relative;
  list-style: none;
  display: inline-block;
  vertical-align: top;
  margin: 21px 0 57px 2em;
  padding: 22px 41px;
}

此外，还可以通过设置ol或li元素的max-width属性来减小列表的宽度，例如：

ol { max-width: 60%; }
或
li { max-width: 300px; }

通过以上方法可以解决li元素之间的空格问题。

最后，如果需要参考效果图，可以点击下方链接查看：i.stack.imgur.com/j98np.png

0
0 Comments

如何移除li元素之间的空白？

问题原因：li元素之间的空白是由于CSS中的margin属性造成的。

解决方法：从CSS中移除margin属性。

具体代码如下：

ol > li {
  position: relative;
  padding: 22px 41px;
  max-width: 50%;
  list-style: none;
  margin: 0; /* 移除margin属性 */
}

另外，如果还需要去除li元素之间的上下空白和居中空白，可参考以下代码：

ol > li {
  position: relative;
  padding: 22px 41px;
  max-width: 50%;
  list-style: none;
  margin: 0;
  margin-top: 0px; /* 移除上方空白 */
  margin-bottom: 0px; /* 移除下方空白 */
}
ol {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-width: 60%;
  max-height: 600px;
  margin-left: 0;
  padding-left: 0;
  counter-reset: li;
}
ol li::before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  top: -2px;
  left: -2em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  margin-right: 8px;
  padding: 17px;
  border: 1px solid rgb(63, 78, 118);
  background: #fff;
  font-weight: bold;
  font-family: proximaNova;
  text-align: center;
}

希望以上内容能对解决该问题有所帮助。

0