有序列表和文本内容:如何将大字体的数字与css中右侧的小文本左居中

Question

我需要帮助对齐数字，使它们以大字体显示在左边，但以右边的描述文本为中心。我还需要删除每个数字后面的点。有人能帮我修一下吗？

我的代码在下面，最终结果应该看起来像这个链接的图像

.navh  {
width: 300px;
height: 300px;
position: relative;
background: #1b9fa4;
border-radius: 2%;
float: left;
margin-left: 120px;
background-color: #1b9fa4;
border-color: #1b9fa4;
}

#item1 :after {
border-left: 0px solid; 
}

.navh  :after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 62.5px solid white;
border-top: 62.5px solid transparent;
border-bottom: 62.5px solid transparent;
z-index:1;

}
.navh  :before {
content: "";
position: absolute;
right: -103px;
bottom: 0;
width: 0;
height: 0;
border-left: 106px solid #1b9fa4;
border-top: 150px solid transparent;
border-bottom: 150px solid transparent;
z-index: 2;
}

.navh li{
/* border: solid red;*/
font-size: 1.7em;
color: white;
font-weight: bold;
margin: 3%;
}


.navh span{
font-size: small;
}

<div class="navh"id="item1">
<ol>
<li><span>Some text here, Some text here, Some text here, Some text here, Some text here, Some text here...</span></li>
<li><span>Some text here, Some text here, Some text here, Some text here, Some text here, Some text here...</span></li>
<li><span>Some text here, Some text here, Some text here, Some text here</span></li>
</ol>
</div>

Answer 1

你需要更新我下面提到的代码，你的代码中有一些问题，所以我也纠正了它，请参考下面提到的代码

HTML

<div class="navh"id="item1">
<ol>
<li><span>Some text here, Some text here, Some text here, Some text here, Some text here, Some text here...</span></li>
<li><span>Some text here, Some text here, Some text here, Some text here, Some text here, Some text here...</span></li>
<li><span>Some text here, Some text here, Some text here, Some text here</span></li>
</ol>
</div>

CSS

.navh  {
width: 300px;
height: 300px;
position: relative;
background: #1b9fa4;
border-radius: 2%;
float: left;
margin-left: 120px;
background-color: #1b9fa4;
border-color: #1b9fa4;
counter-reset: section;
}
#item1 :after {
border-left: 0px solid; 
}
.navh > ol:after {
content: "";

position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 62.5px solid white;
border-top: 62.5px solid transparent;
border-bottom: 62.5px solid transparent;
z-index:1;
}
.navh > ol:before {
content: "";
position: absolute;
right: -103px;
bottom: 0;
width: 0;
height: 0;
border-left: 106px solid #1b9fa4;
border-top: 150px solid transparent;
border-bottom: 150px solid transparent;
z-index: 2;
}
.navh li{
/* border: solid red;*/
font-size: 1.7em;
color: white;
font-weight: bold;
margin: 3%;
position: relative;
padding-left: 30px;
}
.navh ol > li:before{
counter-increment: section;
content: " " counter(section) "";
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
}
.navh span{
font-size: small;
}
.navh ol{
list-style:none;
padding-left:15px
}