CSS/HTML - 圆圈数字的水平线

我试图带一串数字并将圆圈放在它们周围。我如何让它们在一条长水平线上显示，而不是每行一个圆？

07，06，08，02，86，05，01，03，88，87，04

<div class="numberCircle">07</div>, <div class="numberCircle">06</div>, <div class="numberCircle">08</div>, <div class="numberCircle">02</div>, <div class="numberCircle">86</div>, <div class="numberCircle">05</div>, <div class="numberCircle">01</div>, <div class="numberCircle">03</div>, <div class="numberCircle">88</div>, <div class="numberCircle">87</div>, <div class="numberCircle">04</div>, <div class="numberCircle">07</div>, <div class="numberCircle">06</div>,<label><b><del>08</b></del>, <b><del>02</b></del>, <b><del>05</b></del>, <b><del>01</b></del>, <b><del>87</b></del>, <b><del>04</b></del>, </label><br>

基本上我试图复制 this。

来源

2012-04-25 wushugene

你就不能写①②③④⑤⑥⑦⑧⑨⑩？ ;） – 2012-04-25 06:48:29

@MrLister虽然圆圈可能只是装饰性的，没有意义。：p – reisio 2012-04-26 17:56:21

-1

你好你可以给圈到你的电话号码很容易通过CSS3边界半径属性。

而这将在IE浏览器中工作，如果您将在您的代码中正确使用PIE.htc以支持IE边界半径。 {PIE代表Progressive Internet Explorer。它是一个IE附加的行为，当施加到元件，允许IE识别并显示多个CSS3属性。}

我已在代码有序列表与使用CSS3 counter-increment属性的用于获取结果按照您的演示图像。

观看演示： -http://jsfiddle.net/UjfBZ/10/

来源

2012-04-25 06:44:09

IE支持border-radius和所有那些没有任何专有.htc JavaScript的计数器属性。此外，这些数字是内容，它们不是风格，你根本不应该使用CSS（因为圆形边框是合适的） - 空的li是无稽之谈。 – reisio 2012-04-25 20:42:47

使用CSS的float：

div.numberCircle { 
    float: left; 
}

来源

2012-04-25 03:04:25

尝试：

div.numberCircle { 
    float: left; 
    clear:none; 
}

来源

2012-04-25 03:09:00 iambriansreed

只要不使用div元素，这是块（你问到没有）。如果这些数字没有意义（不太可能），那么可以使用span元素（在本例中为display: inline-block;），这些元素是内联的（基本上是您要求的）。 float: left;也是一种选择，但CSS（样式）决定应该在HTML（含义）之后。更有可能您应该在有序列表中使用li元素（ol）。

来源

2012-04-25 03:11:21 reisio

嘿，现在你也可以定义div.numberCircle display inline-block属性，这样

div.numberCircle { 
display:inline-block; 
    zoom:1; // for ie 
*display:inline; // for ie 
}

现场演示http://jsfiddle.net/rohitazad/QYSvB/

来源

2012-04-25 04:10:09

CSS/HTML - 圆圈数字的水平线

回答

相关问题