Question

Here are the thing, I would like to make the text ‘not all likely’ stick to number 1, and text ‘very likely’ stick to the last number. So if I have the number only 6, the button will center aligned and the text will follow the first and last button. How can I do that only with css?

So far I have my code like this

The HTML structure

<div class="module-block">
    <div class="num-block">
    <ul>
        <li><a href="javascript:void(0);">1</a></li>
        <li><a href="javascript:void(0);">2</a></li>
        <li><a href="javascript:void(0);">3</a></li>
        <li><a href="javascript:void(0);">4</a></li>
        <li><a href="javascript:void(0);">5</a></li>
        <li><a href="javascript:void(0);">6</a></li>
        <li><a href="javascript:void(0);">7</a></li>
        <li><a href="javascript:void(0);">8</a></li>
        <li><a href="javascript:void(0);">9</a></li>
        <li><a href="javascript:void(0);">10</a></li>
    </ul>
    </div>
    <div style="clear:both;">
        <span style="color:#ffffff; float:left;">not at all likely</span>
        <span style="color:#ffffff; float:right;" class="right">very likely</span>
    </div>
</div>

Here is the CSS code :

    ul { margin: 0; padding: 0; text-align: center;}
    li { margin:0 1px 0 0; display: inline-block; list-style: none;}
    a { display: inline-block; width: 33px; background-color: #E61968; color: #ffffff; font-size: 16px; font-weight: 600; line-height: 33px; text-align: center; text-decoration: none;}
    .module-block { width: 390px;}

Here is the jsfiddle link: http://jsfiddle.net/d433j/

Answer 1

Place them inside the div that contains the numbers:

<div class="module-block">
  <div class="num-block">
    <ul>
      <li><a href="javascript:void(0);">1</a></li>
      <li><a href="javascript:void(0);">2</a></li>
      <li><a href="javascript:void(0);">3</a></li>
      <li><a href="javascript:void(0);">4</a></li>
      <li><a href="javascript:void(0);">5</a></li>
      <li><a href="javascript:void(0);">6</a></li>
    </ul>
        <span style="float:left;">not at all likely</span>
        <span style="float:right;" class="right">very likely</span>
  </div>
</div>​

Also change the CSS, remove the center alignement of the ul (if you want to centre the block there are other ways). The key here is to float the block (and remove its width!), this way the captions below, will fit the block.

CSS:
(I placed a border at the outer block and removed some numbers to show that it works with less/different numbers)

ul { margin: 0; padding: 0; text-align: left;}
li { margin:0 1px 0 0; display: inline-block; list-style: none;}
a { display: inline-block; width: 33px; background-color: #E61968;    color: #fff; font-size: 16px; font-weight: 600; line-height: 33px; text-align: center; text-decoration: none;}
.module-block {width: auto; border: 1px blue solid; float: left;}

Example:
http://jsfiddle.net/d433j/2/

EDIT:

If you would like to center the block, and not knowing the width of the outer block, just set the outer block display to inline-block, add a position to it and to the numbers block. Aditionally, add the overflow: hidden to the numbers block to make it wrap the captions:

New CSS:

ul { margin: 0; padding: 0; text-align: left;}
li { margin:0 1px 0 0; display: inline-block; list-style: none;}
a { display: inline-block; width: 33px; background-color: #E61968;    color: #fff; font-size: 16px; font-weight: 600; line-height: 33px; text-align: center; text-decoration: none;}
.module-block {display:inline-block;
    position:relative;
    left:50%;}
.num-block {width: auto; border: 1px blue solid; position:relative;
    left:-50%; height: auto; overflow: hidden;}

Example:
http://jsfiddle.net/d433j/3/