制作ol数量以适合图标

我正在尝试制作一个足球运动员列表。所以我有这个jsFiddle。但是，我希望将ol的编号放置在图标内。问题是两位数字溢出该图标。如何解决这个问题？制作ol数量以适合图标

我的CSS是：

ol { 
    display: inline-block; 
} 
ol.ui-listview>li>.ui-btn:first-child:before, ol.ui-listview>li.ui-li-static:before, ol.ui-listview>li.ui-field-contain>label:before, ol.ui-listview>li.ui-field-contain>.ui-controlgroup-label:before{ 
    content: counter(listnumbering) !important; 
} 

#slots { 
    text-align: center; 
}

来源

2015-09-05 gsamaras

有在这个线程很多选择，我想你在文本需要的配件有超过1个位数的几个诉讼。看看如果你还没有完成 - http://stackoverflow.com/questions/4861224/how-to-use-css-to-surround-a-number-with-a-circle – Harry

@哈利我曾看过那个和最好的答案是好的。但是，它干扰jQuery手机，事情崩溃了！ – gsamaras

哦，好的。我将在那里留下评论，以便其他人不再链接它。 – Harry

试试这个CSS

ol { 
    display: inline-block; 
} 
ol.ui-listview>li>.ui-btn:first-child:before, ol.ui-listview>li.ui-li-static:before, ol.ui-listview>li.ui-field-contain>label:before, ol.ui-listview>li.ui-field-contain>.ui-controlgroup-label:before{ 
    content: counter(listnumbering) !important; 
    text-align:center; 
} 

#slots { 
    text-align: center; 
} 

ol > li > a{padding-left:9px !important;}

来源

2015-09-05 13:55:42 AlexArtyukh

制作ol数量以适合图标

回答

相关问题