[英]How do I vertically align sets of radio buttons?
我是html和css的新手。
我有3套單選按鈕。 每組按鈕都以單線顯示。 我希望按鈕在各組按鈕之間垂直對齊。 我無法用css完成這個任務。 我想避免使用表來解決這個問題。 我想我可以通過設置標簽的寬度來對齊單選按鈕,但它不起作用。
我的單選按鈕顯示如下:
我希望它們顯示如下:
這是我的css:
form.remit_change_form label.fixedwidth {
display: block;
width: 180px;
float: left;
}
form.remit_change_form input.radiolabel {
width: 35px /* doesn't make any visual change! */
}
這是我的HTML:
<div>
<label for="tran_code" class="fixedwidth">Tran Code</label>
<input type="radio" class="radioinput" name="tran_code" id="tran_code_22"
value="22"/>
<label for="tran_code_22" class="radiolabel">22</label>
<input type="radio" class="radioinput" name="tran_code" id="tran_code_42"
value="42"/>
<label for="tran_code_42" class="radiolabel">42</label>
<input type="radio" class="radioinput" name="tran_code" id="tran_code_52"
value="52"/>
<label for="tran_code_52" class="radiolabel">52</label>
<input type="radio" class="radioinput" name="tran_code" id="tran_code_na"
value="NA"/>
<label for="tran_code_na" class="radiolabel">NA</label>
</div>
<div>
<label for="cut_off_time" class="fixedwidth">Cut-off Time</label>
<input type="radio" class="radioinput" name="cut_off_time" id="cut_off_time_18.00"
value="18.00"/>
<label for="cut_off_time_18.00" class="radiolabel">18.00</label>
<input type="radio" class="radioinput" name="cut_off_time" id="cut_off_time_19.00"
value="19.00"/>
<label for="cut_off_time_19.00" class="radiolabel">19.00</label>
<input type="radio" class="radioinput" name="cut_off_time" id="cut_off_time_na"
value="NA"/>
<label for="cut_off_time_na" class="radiolabel">NA</label>
</div>
<div>
<label for="remit_notify_method" class="fixedwidth">Remit Notify Method</label>
<input type="radio" class="radioinput" name="remit_notify_method"
id="remit_notify_method_n" value="N"/>
<label for="remit_notify_method_n" class="radiolabel">N</label>
<input type="radio" class="radioinput" name="remit_notify_method"
id="remit_notify_method_f" value="F"/>
<label for="remit_notify_method_f" class="radiolabel">F</label>
<input type="radio" class="radioinput" name="remit_notify_method"
id="remit_notify_method_e" value="E"/>
<label for="remit_notify_method_e" class="radiolabel">E</label>
</div>
如果不需要,您不必使用類( 編輯 :需要它們,因此答案已更新)。
form.remit_change_form label.radiolabel
{
display:inline-block; /* added this */
width: 50px;
}
form.remit_change_form label.fixedwidth {
width: 180px;
}
為什么不給自己一些HTML元素來使用? 如果您反對使用表格,那么如何使用無序列表?
把它放在一張桌子里工作得很好
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.