[英]Positioning the label of a checkbox in a fieldset
我有一個注冊表,並使用fieldset
將input
字段排序為兩行。
現在,我需要在它們下面添加一個復選框。 當然,我可以使用div
來執行此操作,但我想將其集成到fieldset
。
我需要在最后一個列表項(帶有fd
類的列表)下添加一個復選框,並在其旁邊添加標簽。
最后,它應如下所示:
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;
}
我的問題是我只能使標簽位於復選框上方,而不能位於其旁邊。 誰能告訴我如何將標簽放在復選框旁邊? 可以更改我的HTML,但是請避免使用表格。
不知道使用.tc類設置了什么元素,但是我只是將標簽移到復選框之后,並刪除了.tandc
類所具有的float:right
,這看起來就像您要解釋的那樣。
可能就是您要找的東西嗎?
編輯
更新的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>
元素的特定類和ID,因此您應該能夠獨立定位它。
編輯
看到完整的CSS之后,我注意到您已指定每個輸入字段都顯示為塊。 這意味着沒有其他元素可以與div元素一樣位於輸入字段的同一行(您的復選框是那些輸入字段之一)。 您需要做的是指定此特定輸入框可以內聯其他元素。 您可以只添加到類.tandc或ID #tandc display:inline-block
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.