CSS флажок Метка в FIELDSET

Question

я есть следующая проблема:

У меня есть регистрационную форму и используемый FIELDSET для заказа полей ввода в два ряда. Нет, у меня есть проблема, что мне нужно добавить флажок ниже. Конечно, я мог бы сделать это с помощью div, но я хочу интегрировать его в набор полей.

ей пример:

Теперь мне нужно добавить под последним элементом списка с классом Fd флажок и BESIDE, что ярлык для него.

в конце концов, это должно выглядеть так:

label 1       label 2 
    _______________     _______________ 
    (_______________)    (_______________) 

    label 3      label 4 
    _______________     _______________ 
    (_______________)    (_______________) 


    (_) label 5 

на данный момент у меня есть следующий код:

... 
<li class="fd"> 
<label class ="tandc">label 5</label> 
    <input class="tac"type="checkbox" id="tandc" name="tandc" tabindex="30" autocomplete="off" /> 
</li> 


</ul> 
</fieldset> 
</form> 

и для CSS:

.tc { 
    float: right; 
} 
.tac { 
    width: 20px; 
    margin-bottom: 20px; 
} 


.tandc { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    font-weight: bolder; 
    color: #ECECEC; 
    text-decoration: none; 
    width: 450px; 
    float:right; 
    margin-right: 25px; 
    padding-top: 3px; 

} 

моя проблема заключается в том, что я могу получить эту метку выше флажка, а не рядом.

если есть кто-то, кто мог бы помочь мне, я действительно был бы признателен. большое спасибо.

Answer 1

Не уверен, какой элемент оформлен с использованием класса .tc, но я только что переместил метку после флажка и удалил float:right у вас был для класса .tandc, и это похоже на то, что вы пытаетесь объяснить.

Возможно, это то, что вы ищете?

EDIT

обновленный CSS

.tandc { 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
font-weight: bolder; 
color: #ECECEC; 
text-decoration: none; 
width: 450px; 
height: 30px; 
display:inline-block; 
} 

HTML

.... 
<li class="fd"> 
<input class="tac"type="checkbox" id="tandc" name="tandc" tabindex="30" autocomplete="off" /> 
<label class ="tandc">label 5</label> 
</li> 
</ul> 
</fieldset> 
</form> 

Поскольку у вас есть определенный класс и идентификатор для этого <li> элемента вы должны быть в состоянии поместить его Однако вы хотите самостоятельно.

EDIT

После просмотра вашего полного CSS я заметил, вы указали, что каждое поле ввода отображается в виде блока. Это означает, что ни один другой элемент не может находиться в той же строке, что и поле ввода, например, элементы div (ваш флажок является одним из этих полей ввода). Что вам нужно сделать, так это указать, что это конкретное поле ввода может содержать другие элементы внутри него. Вы можете просто добавить в класс .tandc или id #tandc display:inline-block.