CODEWITHSUNDEEP
htmlcssgeometry
wushugene
wushugene

Reputation: 17

CSS/HTML - Horizontal line of circled numbers

See this

I'm trying to take a string of numbers and place circles around them. How do I get them to display in one long horizontal line as opposed to one circle per line?

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>

Basically I'm trying to replicate this.

Upvotes: 0

Views: 2060

Answers (5)

Shailender Arora
Shailender Arora

Reputation: 7778

Hi you can give circles to your number easily through CSS3 border-radius property.

And this will work in IE if you will properly use the PIE.htc in your code for IE support border-radius. {PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties.}

I have made code in ordered list with the use of CSS3 counter-increment property for getting the results as per your demo image.

See the demo:- http://jsfiddle.net/UjfBZ/10/

Upvotes: -1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Hey now you can define your div.numberCircle display inline-block properties as like this

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

Live demo http://jsfiddle.net/rohitazad/QYSvB/

Upvotes: 0

reisio
reisio

Reputation: 3242

Simply do not use div elements, which are block (what you are asking to not have). If the numbers have no meaning (unlikely), you could use span elements (with display: inline-block; in this case), which are inline (basically what you're asking for). float: left; is also an option, but CSS (style) decisions should come after HTML (meaning) ones. More likely you should be using li elements inside an ordered list (ol).

Upvotes: 1

iambriansreed
iambriansreed

Reputation: 22241

Try:

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

Upvotes: 0

John Conde
John Conde

Reputation: 219834

Use CSS float:

div.numberCircle {
  float: left;
}

Upvotes: 1

Related Questions