Span с радио-кнопки под

Question

У меня есть некоторый код начальной загрузки, чтобы иметь радио-кнопки, чтобы выбрать цвет: http://jsfiddle.net/m4uoo2s9/

CSS-код выглядит следующим образом:

.color { 
    height: 20px; 
    width: 25px; 
    display: inline-block; 
} 

.red { background: red; } /* And I'll have a blue one, and a green one */ 

Сейчас переключатель имеет свой соответствующий промежуток цвета для право. Тем не менее, я хочу, чтобы переключатель переключался по горизонтали под соответствует соответствующему цветовому диапазону.

Answer 1

Возможно, с абсолютным позиционированием? Как так:

.radio-inline input{ 
position:absolute; 
top:28px; 
margin-left:3px; 
} 

DEMO

Answer 2

Поместите кнопку радио входной тег ниже диапазона тега внутри вашего элемента этикетки и для отображения использования CSS свойств диапазона тега: блок.

<label class="radio-inline"> 
      <span class='color red' style="display:block;"></span> 
      <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 
    </label> 

Answer 3

на основе кода, представленной в вашем JFiddle

1. Изменить HTML, так что продолжительность идет перед входом:

   <label class="radio-inline"> 
       <div class='color red'></div> <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 
   </label> 
   

2. изменения также пролет в DIV (выше)

3. Используйте «блок» вместо «встроенного блока» для вашего .color класс
4. Установите ярлыки влево, чтобы они появлялись бок о бок, добавьте отступ или отступы для небольшого пространства.

Answer 4

У меня есть создать немножко изменения в вашем CSS

label{float:left; margin-right:5px}/*Add*/ 

.color { 
    height: 20px; 
    width: 25px; 
    /*display: inline-block;*/ /*Remove*/ 
    display: block; 
} 

.red { background: red; } 

********** Модифицированный CSS **********

label{float:left; margin-right:5px; text-align:center}/*Add*/ 


.color { 
    height: 20px; 
    width: 25px; 
    /*display: inline-block;*/ /*Remove*/ 
    display: block; 
    text-align:left; 
} 

.red { background: red; } 

Demo

Добавить в вашем CSS

input[type="radio"]{position:absolute; top:30px; display:table} 

Modified Demo