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

Question

我需要帮助来对齐数字，以便它们以大字体显示在左侧，但与右侧的描述文本居中。我也需要在每个数字后删除点。有人可以帮忙修复吗？

我的代码在下面，最终结果应该类似于这张 link here

中的图像

  .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
}

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

Ordered List and text content: How to Left center the numbers in large font size against small text on the right in css

html

css

list

html-lists