问题描述
我需要帮助对齐数字,以便它们以大字体显示在左侧,但与右侧的描述文本居中。我也需要在每个数字后删除点。有人可以帮忙解决吗?
.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...</span></li>
<li><span>Some text here,Some text here</span></li>
</ol>
</div>
解决方法
您需要更新我在下面提到的代码,您的代码中存在一些问题,因此我也对其进行了纠正,请参考下面提到的代码
HTML
<div class="navh"id="item1">
<ol>
<li><span>Some text here,Some text here,Some text here...</span></li>
<li><span>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
}