我正在尝试在HTML和CSS中创建一个漂亮的H2标题,它将允许我在实际的标题文本之前添加一个格式良好的数字,如下图所示:
上图示例使用以下CSS代码,效果很好,但我无法在HTML中设置橙色圆圈中的数字值。
我的另一种尝试是将
使用这种方法,我可以在HTML中设置Number的值。我的问题是,当h2文本太宽而无法放在一行时,它会跳到新的一行并不再与圆形数字span保持在同一行上。这很糟糕!请参见图像:
请问有人能帮我找到一个好的解决方案,使得宽h2文本仍与我的数字span保持在一起,就像第一种情况一样?
![enter image description here](https://istack.dev59.com/pjIiD.webp)
h2:before {
content: "2";
text-align: center;
position: relative;
display: inline-block;
margin-right: 0.6em;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
width: 1.6em;
height: 1.6em;
font-weight: 900;
line-height: 1.6;
color: #FFF;
font-size: 1em;
background: #F77621;
}
<h2>How to Get Detailed PPC Keyword Data</h2>
h2
和span
都包裹在一个div
中。这个标签用来显示数字圆圈:
.number-circles {
margin-bottom: 0.4em;
}
.number-circles h2 {
display: inline-block;
font-size: 1.5em;
text-transform: capitalize;
line-height: 1.75em;
color: #555;
}
.number-circles span.num {
position: relative;
display: inline-block;
margin-right: 0.6em;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
width: 1.6em;
height: 1.6em;
font-weight: 900;
line-height: 1.6;
text-align: center;
color: #FFF;
font-size: 1em;
background: #F77621;
}
/* added to show the issue */
.number-circles {
max-width: 15em;
}
<div class="number-circles">
<span class="num">2</span>
<h2>How to Get Detailed PPC Keyword Data</h2>
</div>
请问有人能帮我找到一个好的解决方案,使得宽h2文本仍与我的数字span保持在一起,就像第一种情况一样?
border-radius
。不再需要添加-webkit-
或-moz-
,而-o-border-radius
和-ms-border-radius
从未存在过。 - Ry-