<span style="border-radius: 50%;    height: 20px;    width: 20px;    display: inline-block;    background: #f30303;      vertical-align: top;">  
      <span style="display: block;    color: #FFFFFF;    height: 20px;    line-height: 20px;    text-align: center"> 12</span>  
 </span>

效果图：

我有一个html页面,如下所示：
我想在左窗格中显示一些文本,但问题是文本应该在椭圆形区域内.我该如何实现？请注意,椭圆形图像是背景图像,但是如果需要,我也可以使用< img>如果它有帮助的标签.一个跛脚的方式是使用< p>标签与填充,但这不是一个有效的方式,所以建议一些好的方法.
编辑：HTML：
CSS：
#leftStage {
position: relative;
width: 34%;
height:86%;
float: left;
}
#questionDisp {
display:none;
}
JS：(当调用相应的函数时)：
$("#questionDisp").fadeIn(1000);
$("#questionDisp").html(quesArr.q1);  //data read from xml
编辑：我需要的是一个div或高于椭圆形背景的东西,&文本应该适合.我正在从xml文件中获取文本,所以不是我有一个固定的文本大小来显示

2009-05-07
图上圆圈代表什么意思？
首先说明一下，埃及和叙利亚空军的军徽几乎一样，只不过叙利亚的多两颗星。但是因为以色列人得到F-15的时候以色列和埃及已经签了和平协议，所以这个圆圈应该是叙利亚空军的军徽，代表的应该是1982年第五次中东战争和之前空战中葬身于这些大卫“鹰”之爪的叙利亚空军战机。
如果推断属实，那么根据照片中至少10架战果判断，这些“鹰”应该属于第133“双尾翼”中队，具体型号F-15A/B。这样算上1982年前以色列的F-15小试牛刀干掉至少4架米格-21和1982年中的总战果数，10架应该是属实的。
附：1982年第五次中东战争中以色列的F-15的战果
日期 所属以色列空军部队 以色列战斗机型号 ...全部
首先说明一下，埃及和叙利亚空军的军徽几乎一样，只不过叙利亚的多两颗星。但是因为以色列人得到F-15的时候以色列和埃及已经签了和平协议，所以这个圆圈应该是叙利亚空军的军徽，代表的应该是1982年第五次中东战争和之前空战中葬身于这些大卫“鹰”之爪的叙利亚空军战机。
如果推断属实，那么根据照片中至少10架战果判断，这些“鹰”应该属于第133“双尾翼”中队，具体型号F-15A/B。这样算上1982年前以色列的F-15小试牛刀干掉至少4架米格-21和1982年中的总战果数，10架应该是属实的。
附：1982年第五次中东战争中以色列的F-15的战果
日期 所属以色列空军部队 以色列战斗机型号 以色列飞行员 使用武器 被击落的叙利亚战斗机型号 被击落的叙利亚飞行员
1982年6月9日 第133中队 F-15A “R” AIM-7F 米格—23MF 雅西努
1982年6月9日 第133中队 F-15A “R” AIM-7F 米格—23MF 索飞(死亡)
1982年6月9日 第133中队 F-15A      AIM-9L 米格—23MS 托米
1982年6月9日 第133中队 F-15A      AIM-9L 米格—23MS 阿里
1982年6月11日 第133中队 F-15A     AIM-7F 米格—23MS 阿尔·赫拉特
1982年6月11日 第133中队 F-15A     AIM-7F 米格—23MS 扎米
1985年11月20日 第106中队 F-15A 尼尔·罗南 AIM-7M 米格—23ML
1985年11月20日 第106中队 F-15A 尼尔·罗南 AIM-7M 米格—23ML
。
收起

如果有人仍在阅读本文，我遇到了同样的问题，并发现一个非常有用的教程。
ol {
counter-reset:li; /* Initiate a counter */
margin-left:0; /* Remove the default left margin */
padding-left:0; /* Remove the default left padding */
}
ol > li {
position:relative; /* Create a positioning context */
margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
padding:4px 8px; /* Add some spacing around the content */
list-style:none; /* Disable the normal item numbering */
border-top:2px solid #666;
background:#f6f6f6;
}
ol > li:before {
content:counter(li); /* Use the counter as content */
counter-increment:li; /* Increment the counter by 1 */
/* Position and style the number */
position:absolute;
top:-2px;
left:-2em;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
width:2em;
/* Some space between the number and the content in browsers that support
generated content but not positioning it (Camino 2 is one example) */
margin-right:8px;
padding:4px;
border-top:2px solid #666;
color:#fff;
background:#666;
font-weight:bold;
font-family:"Helvetica Neue", Arial, sans-serif;
text-align:center;
}
li ol,
li ul {margin-top:6px;}
ol ol li:last-child {margin-bottom:0;}