我想创建一个带有边框的有序列表并形成圆形。我希望列表中的数字在边框框内居中显示,并且边框框在段落中居中显示。目前,这两个项目都居中于顶部(数字居中于边框框的顶部,边框框居中于段落的顶部)。我希望边框(圆形)能够随着段落大小自动调整。因此,如果我的段落占据3行,则圆形将出现在这三行的中间。如果它占据5行,则圆圈将出现在这5行的中间。
HTML
CSS(层叠样式表)
HTML
<ol>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</li>
</ol>
CSS(层叠样式表)
li{
margin-top: 20px;
margin-right: 30%;
font-size: 20px;
}
ol {
counter-reset:li; /* Initiate a counter */
margin-left:0; /* Remove the default left margin */
padding-left:0; /* Remove the default left padding */
}
ol > li {
position:relative; /* Create a positioning context */
margin:0 30% 20px 4.5em; /* Give each list item a left margin to make room for the numbers */
padding:4px 8px; /* Add some spacing around the content */
list-style:none; /* Disable the normal item numbering */
}
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: 0px;
left:-2.5em;
margin-right:8px;
padding:4px;
width: 50px;
height: 50px;
border-radius: 50%;
color:#fff;
background:blue;
font-weight:bold;
font-family:"Helvetica Neue", Arial, sans-serif;
text-align: center;
}