對齊html中的旁邊的複選框

我有一個關於使用html/CSS的基本CSS/html問題。我認爲這是相當基本和顯而易見的，但它不能按預期工作。對齊html中的旁邊的複選框

在這個基本的形象，我想上的標籤，是專業的右

（創建一個註冊頁面，用戶可以選擇自己的專業知識）

我會相信這基本上是

<tr> 

<td>Expertise</td> 
    <input type="checkbox" style="vertical-align: left; margin: 12px;"> Label </input><br>    
    <input type="checkbox" style="vertical-align: left; margin: 12px;"> Label 2 </input> 

</tr>

但是，這是不按預期工作。

來源

2013-05-02 JavaChipMocha

爲什麼不能在td結束前放兩個複選框 – Afsar 2013-05-02 18:21:13

只需切換它們。 [實施例]（http://jsfiddle.net/GxkFS/）。 – Vucko 2013-05-02 18:21:32

所有標記首先是無效的，table元素只能有這都是爲了table作爲其子元素，即tbody, thead, th, tr, td等元素，並沒有其他的元素，而不是你可以把裏面td

其次輸入這些複選框標籤沒有任何明確的結束標記，則需要自行關閉它，否則離開它，但不關閉就像<br>

三 - 使用label標籤，而不必流浪文本之外複選框

Demo

正確的方法

<table> 
    <tr> 
    <td class="valign"> 
     Expertise 
    </td> 
    <td> 
     <input type="checkbox" style="vertical-align: left; margin: 12px;" /> 
     <label>Label</label><br /> 
     <input type="checkbox" style="vertical-align: left; margin: 12px;" /> 
     <label>Labe2</label> 
    </td> 
    </tr> 
</table>

CSS

.valign { 
    vertical-align: top; 
}

來源

2013-05-02 18:24:20

是否有任何理由讓我的標籤像http://puu.sh/2Lvcu.png而不是我想要的那樣在jfiddle中運行 – JavaChipMocha 2013-05-02 18:30:44

@JavaChipMocha是的，我會告訴你一個使用它們的好處等待 – 2013-05-02 18:31:22

@JavaChipMocha選擇文本和複選框將被自動選擇:) http://jsfiddle.net/DawZK/1/也有更好的標籤，而不是流浪的文本，標籤將顯示是的，這個文本屬於該特定的複選框 – 2013-05-02 18:32:41

既然你已經使用表格，只需將輸入標記到另一個td標籤是這樣的：

<tr> 

<td>Expertise</td> 
<td> 
    <input type="checkbox" style="vertical-align: left; margin: 12px;"> Label </input><br>    
    <input type="checkbox" style="vertical-align: left; margin: 12px;"> Label 2 </input> 
</td> 

</tr>

這將使複選框出現在「Exp ertise」。

來源

2013-05-02 18:25:01 emijayne

對齊html中的​​旁邊的複選框

回答

相關問題

對齊html中的旁邊的複選框