簡體   English   中英

將復選框的標簽放置在字段集中

[英]Positioning the label of a checkbox in a fieldset

我有一個注冊表,並使用fieldsetinput字段排序為兩行。

現在,我需要在它們下面添加一個復選框。 當然,我可以使用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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM