我有列出项目的部分,我正在努力删除li
元素之间的空格,请寻求帮助。
这是jsfiddle:https://jsfiddle.net/g0z7v394/
.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;
}
<section class="info-section">
<div class="main-info">
<h2>Nature from air</h2>
<p>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.</p>
<ol class="info-list">
<li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
<li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
<li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
<li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
<li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
</ol>
</div>
</section>
答案 0 :(得分:2)
在这种情况下,我建议在flexbox上使用CSS多列。然后根据需要在padding
上调整margin
和li
。
ol {
column-count: 2;
}
.main-info {
background-image: url("https://preview.ibb.co/hZw69K/drone.png");
background-position: right center;
background-repeat: no-repeat;
}
ol {
column-count: 2;
counter-reset: li;
}
ol>li {
position: relative;
list-style: none;
display: inline-block;
vertical-align: top;
margin: 21px 0 57px 2em;
padding: 22px 41px;
}
ol>li::before {
content: counter(li);
counter-increment: li;
position: absolute;
top: -2px;
left: -2em;
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;
}
<section class="info-section">
<div class="main-info">
<h2>Nature from air</h2>
<p>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.</p>
<ol class="info-list">
<li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
<li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
<li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
<li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
<li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
</ol>
</div>
</section>
答案 1 :(得分:0)
here is css .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;
/* Make flex children pile up 'vertically'. */
flex-wrap: wrap;
/* Wrap children to next 'column'. */
max-width: 60%;
/* To prevent covering the drone image. */
max-height: 600px;
/* Set maximum height so columns will wrap. */
margin-left: 0;
/* Remove the default left margin */
padding-left: 0;
/* Remove the default left padding */
counter-reset: li;
/* Initiate a counter */
}
ol>li {
position: relative;
padding: 22px 41px;
max-width: 50%;
list-style: none;
}
ol>li::before {
content: counter(li);
/* Use the counter as content */
counter-increment: li;
/* Increment the counter by 1 */
/* Position and style the number */
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%;
/* Some space between the number and the content in browsers that support
generated content but not positioning it (Camino 2 is one example) */
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;
}
<section class="info-section">
<div class="main-info">
<h2>Nature from air</h2>
<p>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.</p>
<ol class="info-list">
<li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
<li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
<li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
<li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
<li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>
</ol>
</div>
</section>
从CSS中删除边距
ol > li
{
position: relative;
padding: 22px 41px;
max-width: 50%;
list-style: none;
}