0

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.

Community
  • 1
  • 1
wushugene
  • 17
  • 1
  • 7

5 Answers5

1

Use CSS float:

div.numberCircle {
  float: left;
}
John Conde
  • 217,595
  • 99
  • 455
  • 496
1

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).

reisio
  • 3,242
  • 1
  • 23
  • 17
0

Try:

div.numberCircle {
    float: left;
    clear:none;
}
iambriansreed
  • 21,935
  • 6
  • 63
  • 79
0

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/

Rohit Azad Malik
  • 31,410
  • 17
  • 69
  • 97
-1

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/

Shailender Arora
  • 7,674
  • 2
  • 31
  • 35
  • IE supports border-radius and all those counter properties without any proprietary .htc JavaScript. Also the numbers are content, they aren't style, you shouldn't be using CSS for them at all (for the circular border is appropriate) - empty li's is nonsense. – reisio Apr 25 '12 at 20:42