CSS/HTML - 丸数字

Question

See this

の水平ラインは、私は彼らの周りの数字と場所の円の文字列を取るしようとしています。 1行に1つの円ではなく、1つの長い水平線で表示するにはどうすればよいですか？

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を複製しようとしています。

Answer 1

あなたの番号に丸を付けることができこんにちは簡単ボーダー半径 CSS3 てプロパティ。

これは、Internet Explorerのサポートborder-radiusのコードでPIE.htcを正しく使用する場合、IEで動作します。 {PIEはProgressive Internet Explorerの略です。これは、素子に適用した場合、IEを認識し、CSS3プロパティの数を表示することができIE添付の挙動である。}私が取得するためCSS3 counter-incrementプロパティを使用してのコード順序付きリスト行った

あなたのデモイメージによる結果。

はデモを参照してください： -http://jsfiddle.net/UjfBZ/10/

Answer 2

使用CSSフロート：

div.numberCircle { 
    float: left; 
} 

Answer 3

は試してみてください。

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

Answer 4

は、単純に（あなたが持っていないために求めているもの）ブロックされているdiv要素を、使用しないでください。数字に意味がない場合は、spanの要素（この場合はdisplay: inline-block;）を使用できます。これはインラインです（基本的にはあなたが求めているものです）。 float: left;もオプションですが、CSS（スタイル）の決定はHTML（意味）のものにするべきです。おそらく、li要素を順序付きリスト（ol）内に使用する必要があります。

Answer 5

ちょっと今はdisplay inline-blockプロパティこの

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

ライブデモなど、あなたのdiv.numberCircleを定義することができhttp://jsfiddle.net/rohitazad/QYSvB/