如何解决有序列表和文本内容:如何在 css 中将大字体大小的数字与右侧的小文本左居中
我需要帮助对齐数字,以便它们以大字体显示在左侧,但与右侧的描述文本居中。我也需要在每个数字后删除点。有人可以帮忙解决吗?
.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
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。