CSS inside of regular 'ol text

Question

I feel like this is something that should be an easy fix, but I'm stumped. I'd like to have each item in the list separated (inline) by a "list-block", but I can't get the blocks to show up using anything other than div tags, which automatically jump to a new line. I would just use HTML symbols (like below), but I want CSS customization. Thanks in advance!

Fiddle: http://jsfiddle.net/sos12/UwsFL/

CSS:

.list-block {
  width: 1%;
  height:0;
  padding-bottom: 1%;
  -moz-border-radius: 1%;
  -webkit-border-radius: 1%;
  border-radius: 1%;
  background: black;
}

Tags:

<h2>
   Apples 
      <i class="list-block"></i>
   Pears
      <div class="list-block"></div>
   Peaches
      <span class="list-block"></span>
   Plums 
      <a class="list-block"></a>
   Grapes  
</h2>

HTML symbols:

<h2>
  Apples 
    &diams;
  Pears
    &diams;
  Peaches
    &diams;
  Plums 
    &diams;
  Grapes  
</h2> 

Answer 1

If you want the elements to be on the same line and have the attributes of a block element (such as a div), you have to use display: inline-block. You can then use margin to control the spacing between them.:

.list-block {
    width: 1%;
    height:0;
    padding-bottom: 1%;
    -moz-border-radius: 1%;
    -webkit-border-radius: 1%;
    border-radius: 1%;
    background: black;

    display: inline-block;
    margin: 5px;
}

---

If you want to rotate the elements to make them diamonds, just use a transform (note that this is CSS3 and is not supported in really old browsers):

-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);

JSFiddle

Answer 2

Add display:inline-block.

This will allow you to make <div>s show up on the same line, or allow you to give width (and height) to an otherwise inline element.

Answer 3

For the list , usually use list-style-type http://jsfiddle.net/UwsFL/2/

li {
    list-style-type:square;
    font-size:2em;/* to show that squares follow font-size */
}

But inside a title, ul has no place :). Your approach with html entities is a good idea , then maybe you need to use word-spacing ? http://jsfiddle.net/UwsFL/3/

h2 {
    text-align:center;
    word-spacing:1em;
}

You can as well use pseudo element and style them : http://jsfiddle.net/UwsFL/5/ (only in between)

h2 {
    text-align:center;
}
h2 span {
    display:inline-block;
}
h2 span:before {
    content:'\29eb';
    padding:0 0.5em;
}
h2 span:first-of-type:before {
    content:'';
}

or all around : http://jsfiddle.net/UwsFL/6/

Hope these examples give you some idea:)