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 - 圓圈數字的水平線

回答

相關問題