我正在使用以下设计建议创建HTML和CSS:
但是我的结果是:
HTML代码:
<div className="project_content">
<div className="project_quick f_bold" id="tab">
<a><span>업데이트</span><span className="alral_num">1</span></a>
<a><span>커뮤니티</span><span className="alral_num">34</span></a>
<a><span>통계</span></a>
</div>
</div>
CSS代码:
.alral_num {
height: 20px;
padding: 2px 7px 0 7px;
margin: 0 0 0 5px;
display: inline-block;
background: #e8351d;
border-radius: 15px;
text-align: center;
color: #fff;
line-height: 1.2;
}
.project_content .project_quick .alral_num {
position:relative;
width: 20px;
display: table;
left: 20%;
margin-top: 5px;
}
.project_quick a {
height: 60px;
padding: 20px 40px 20px;
display: inline-block;
font-size: 16px;
background: url(../../assets/images/line01.gif) no-repeat right 50%;
}
.project_quick a:last-child{
background: none
}
.f_bold {
font-weight: 700 !important;
}
我想在边框上显示数字
我尝试过position:fixed
,但是我必须垂直或水平滚动,滚动时应移动数字。所以没用。