我试图在
HTML和CSS中创建一个漂亮的H2标题,这将允许我在实际标题文本之前有一个很好的格式化的数字,如下图所示：
图像中的示例使用下面的CSS代码,它的工作原理很好,除了我无法在HTML中的橙色圆圈中设置数字值！
@H_301_4@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; } @H_301_4@<h2>How to Get Detailed PPC Keyword Data</h2>我的另一个尝试是把h2和div都放在div里面.跨度保持数字圈：
@H_301_4@.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; } @H_301_4@<div class="number-circles"> <span class="num">2</span> <h2>How to Get Detailed PPC Keyword Data</h2> </div>使用这种方法,我可以设置HTML中的Number的值.我所遇到的问题是当h2文本对于单行而言太宽,那么它将使整个事情进入一个新行,并且不保留在与行号相符的行上.这不好！查看图片：
有人可以帮助我一个很好的解决方案,像第一个这样的行为,一个广泛的h2文本将保持在我的数字跨越？
解决方法
… it works great,except that I cannot set the number value in the
orange circle in the HTML!
您可以使用CSS pseudo elements和HTML5数据属性：
@H_301_4@h2:before { content: attr(data-number); display: inline-block; /* customize below */ font-size: 1em; margin-right: 0.6em; width: 1.6em; line-height: 1.6em; text-align: center; border-radius: 50%; color: #FFF; background: #F77621; } @H_301_4@<h2 data-number="2">Heading</h2>也可以将数字包在一个跨度内,并将其放在标题内.这使得搜索引擎可以看到该号码.除了不需要content属性之外,CSS将保持不变.
只要记住,如果您只想编号您的标题,您可以使用CSS2 counters：
@H_301_4@.use-counter { counter-reset: foo 0; } .count-this:before { counter-increment: foo 1; content: counter(foo) "."; display: inline-block; /* customize below */ font-size: 1em; margin-right: 0.6em; width: 1.6em; line-height: 1.6em; text-align: center; border-radius: 50%; color: #FFF; background: #F77621; } @H_301_4@<section class="use-counter"> <h1>Lorem ipsum dolor sit amet</h1> <h2 class="count-this">Fusce sed nunc eget sem euismod</h2> <h2 class="count-this">In vel libero in nibh finibus finibus</h2> <h2 class="count-this">Nam eleifend nulla ut placerat interdum</h2> </section> <section class="use-counter"> <h1>Aenean ac urna id sapien</h1> <h2 class="count-this">Nulla molestie nunc non ultrices</h2> <h2 class="count-this">Nam eleifend nulla ut placerat interdum</h2> <h2 class="count-this">Curabitur eget sapien tempor arcu</h2> </section>