Question

中的代码

.numberCircle {
  border-radius: 10%;
  behavior: url(PIE.htc);
  /* remove if you don't care about IE8 */
  width: 36px;
  height: 36px;
  display: table;
  padding: 10px;
  margin-top: 15px;
  background: #fff;
  border: 2px solid #666;
  color: #666;
  text-align: center;
  font: 28px Arial, sans-serif;
}

<div class="numberCircle">368585760</div>

感谢有这个小提琴的人，我用我的更改更新了它：，现在没有添加额外的html elements，是否可以设计框内的每个数字看起来像这样

http://prntscr.com/gi26iz

我试图使用css3第一个孩子，第二个孩子等等，但我不知道该怎么办。

Answer 1

如果您无法更改标记，可以尝试使用jquery - 将每个数字包裹替换 div的内容到span

请参阅演示以帮助您入门：

var html = $('.numberCircle')
  .text()
  .split('').map(function(e){
     return "<span>" + e + "</span>";
  }).join('');
$('.numberCircle').html(html);

.numberCircle span {
  border-radius: 10%;
  behavior: url(PIE.htc);
  /* remove if you don't care about IE8 */
  width: 36px;
  height: 36px;
  /*display: table;*/
  display: inline-block; /* CHANGED */
  padding: 10px;
  margin: 15px;
  background: #fff;
  border: 2px solid #666;
  color: #666;
  text-align: center;
  font: 28px Arial, sans-serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="numberCircle">368585760</div>

Answer 2

我认为唯一的方法是使用javascript为每个元素添加样式。没有css像：nth-letter

使css数字看起来很漂亮

2 个答案: