css form - расположение переключателей

0

В настоящее время я изучаю html/css и хочу разработать свою первую веб-форму. Однако у меня возникают проблемы с размещением моих переключателей рядом со связанной меткой.

Вот мой jsfiddle

Я предполагаю, что мне нужно создать стиль.radio в моем css. Однако я не уверен, что делать.

<form id="contactform" class="rounded" method="post" action="">

<h3>Equipment Procurement Form</h3>

    <p>Use this form to submit requests to Medical Physics for new equipment</p>
    <div class="field">
        <label for="Directorate">Directorate</label>
        <input type="text" class="input" name="Directorate" id="Directorate" />
        <p class="hint">Enter your directorate.</p>
    </div>
    <div class="field">
        <label for="Department">Department:</label>
        <input type="text" class="input" name="Department" id="Department" />
        <p class="hint">Enter your department.</p>
    </div>
    <div class="field">
        <label for="Request">Equipment Requested:</label>
        <textarea class="input textarea" name="Request" id="Request"></textarea>
        <p class="hint">Summarise equipment request..</p>
    </div>

    <div class="radio">  
        <input id="Capital" type="radio" name="Capital" value="Capital">  
            <label for="Capital">Capital
                <span class="small">&#62;&pound;5000 (inc VAT)</span></label>  
        <input id="Capital" type="radio" name="Capital" value="Revenue">  
        <label for="Capital">Revenue
            <span class="small">&#60;&pound;5000 (inc VAT)</span></label>   
    </div>  

    <input type="submit" name="Submit" class="button" value="Submit" />
</form>
Теги:

3 ответа

2
Лучший ответ

Обратитесь к этому http://jsfiddle.net/3sPNH/13/. Надеюсь, так и хочется. Просто поместил input внутрь.

Поделиться
  • 0
    Спасибо за ответ. Не думаю, что вы знаете, почему мой второй набор переключателей не попадает на следующую строку?
  • 0
    Ты имеешь в виду, что у тебя есть другой набор двух радиокнопок, кроме этого?
Показать ещё 4 комментария
1

Вы помещаете радиоклетки за пределы ярлыка, они будут удерживать их вместе, если вы их вставьте.

<div class="radio">  
        <label for="Capital">Capital
        <input id="Capital" type="radio" name="Capital" value="Capital">  
        <span class="small">&#62;&pound;5000 (inc VAT)</span></label>  

         <label for="Capital">Revenue
         <input id="Capital" type="radio" name="Capital" value="Revenue"> 
         <span class="small">&#60;&pound;5000 (inc VAT)</span></label>   
    </div>
Поделиться
1 
<form id="contactform" class="rounded" method="post" action="">

<h3>Equipment Procurement Form</h3>

<p>Use this form to submit requests to Medical Physics for new equipment</p>
<div class="field">
    <label for="Directorate">Directorate</label>
    <input type="text" class="input" name="Directorate" id="Directorate" />
    <p class="hint">Enter your directorate.</p>
</div>
<div class="field">
    <label for="Department">Department:</label>
    <input type="text" class="input" name="Department" id="Department" />
    <p class="hint">Enter your department.</p>
</div>
<div class="field">
    <label for="Request">Equipment Requested:</label>
    <textarea class="input textarea" name="Request" id="Request"></textarea>
    <p class="hint">Summarise equipment request..</p>
</div>
<div class="radio">  
    <label><input id="Capital" type="radio" name="Capital" value="Capital">  
        Capital
            <span class="small">&#62;&pound;5000 (inc VAT)</span></label>  

    <label>
        <input id="Capital" type="radio" name="Capital" value="Revenue">
        Revenue
        <span class="small">&#60;&pound;5000 (inc VAT)</span></label>   
</div>  

<input type="submit" name="Submit" class="button" value="Submit" />

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню