Horizontal Radio button list with label underneath

by thakkar

HTML

<div class="radio-button-side-by-side-div">
    <input type="radio" class="radio" />
    <label class="choice">1</label>
</div>
<div class="radio-button-side-by-side-div">
    <input type="radio" class="radio" />
    <label class="choice">2</label>
</div>
<div class="radio-button-side-by-side-div">
    <input type="radio" class="radio" />
    <label class="choice">3</label>
</div>
<div class="radio-button-side-by-side-div">
    <input type="radio" class="radio" />
    <label class="choice">4</label>
</div>
<div class="radio-button-side-by-side-div">
    <input type="radio" class="radio" />
    <label class="choice">5</label>
</div>

CSS

div.radio-button-side-by-side-div{
    float:left;padding:10px;
}

div.radio-button-side-by-side-div input {
    display:block;
}

div.radio-button-side-by-side-div label {
    display:block; text-align:center;margin-top:3px;
}