html - css 表单 - 单选按钮放置

Question

我目前正在学习 html/css 并且想开发我的第一个网络表单。但是，我在将单选按钮放置在相关标签旁边时遇到问题。

这是我的 jsfiddle

我想我必须在我的 CSS 中创建一个 .radio 样式。但是，我不确定该怎么做。

<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>

Answer 1

引用这个http://jsfiddle.net/3sPNH/13/ .我希望这就是你想要的。只需将 input 放在里面。