與顯示單元格標籤對齊

我怎樣才能獲得標籤下面的代碼水平對齊：與顯示單元格標籤對齊

div { 
 
    display: table; 
 
    width: 200px; 
 
} 
 
div input, 
 
div label { 
 
    display: table-cell; 
 
}

<div> 
 
    <input type="checkbox"> 
 
    <label>This is a label.</label> 
 
</div> 
 
<div> 
 
    <input type="checkbox"> 
 
    <label>This is a label with a longer text.</label> 
 
</div>

參見：https://jsfiddle.net/a7t3qnbg/1/

編輯：爲了更清楚：我無法更改固定寬度，我希望標籤在複選框的同一行上開始，並且也要水平對齊（即使在換行後）。

來源

2016-07-19 DrRumpus

添加width: 100%到div label：

div { 
 
    display: table; 
 
    width: 200px; 
 
} 
 
div input, 
 
div label { 
 
    display: table-cell; 
 
} 
 
div label { 
 
    width: 100%; 
 
}

<div> 
 
    <input type="checkbox"> 
 
    <label>This is a label.</label> 
 
</div> 
 
<div> 
 
    <input type="checkbox"> 
 
    <label>This is a label with a longer text.</label> 
 
</div>

來源

2016-07-19 14:39:48 searlea

謝謝，簡單的解決方案。你可以向我解釋爲什麼沒有設置寬度它不工作？ – DrRumpus

如果不設置'width'，瀏覽器將在所有表格單元格中分配'spare'空間。第一行有空餘空間，瀏覽器向包含輸入的表格單元分配一些位。注意：在你的情況下，每個'div'創建它自己的'table'，它們是**不是**錶行。如果你真的想要得到table-ish佈局，那麼你需要一個帶有'table'佈局的包裝容器，然後改變'div'來讓'display：table-row'代替 - 然後你可以擺脫'寬度：100％'規則。 – searlea

您可以使用顯示：內聯

div { 
    display: table; 
    width: 200px; 
} 
div input, div label { 
    display: inline; 
}

來源

2016-07-19 14:33:10 Imphusius

是否有可能有上線突破後的同一對準第二個標籤？它位於內嵌複選框下方。 – DrRumpus

這應該有所幫助（https：// jsfiddle。net/a7t3qnbg/3 /） div input {display：inline-block; vertical-align：top; } div label { width：200px; display：inline-block; } – Imphusius

謝謝，設置標籤上的寬度。內聯塊屬性似乎並不需要。 – DrRumpus

這可以很容易地使用inline-block的實現：

https://jsfiddle.net/a7t3qnbg/2/

div { 
    width: auto; 
} 
div input, div label { 
    display: inline-block; 
}

讓我們知道，如果你「必須」保持顯示器：表格作爲您的佈局。

來源

2016-07-19 14:33:40 Lowkase

在這種情況下，我需要200px的固定值。我也希望這兩個標籤在複選框的同一行上開始並水平對齊（即使在換行符後面）。 – DrRumpus

如果標籤文本太大，您將遇到固定寬度爲200px的溢出問題。 – Lowkase

div { 
 
width: auto; 
 
} 
 
div input, div label { 
 
display: inline-block; 
 
}

<div> 
 
    <input type="checkbox"> 
 
    <label>This is a label.</label> 
 
</div> 
 
<div> 
 
    <input type="checkbox"> 
 
    <label>This is a label with a longer text.</label> 
 
</div>

來源

2016-07-19 14:34:10 Developer

在這種情況下，我需要200px的固定寬度。使用您的解決方案，第二個標籤與複選框不在同一行。 – DrRumpus

像這樣的事情？

div { 
 
    display: table; 
 
    width: 300px; 
 
} 
 
div input, 
 
div label { 
 
    display: inline; 
 
}

<div> 
 
    <input type="checkbox"> 
 
    <label>This is a label.</label> 
 
</div> 
 
<div> 
 
    <input type="checkbox"> 
 
    <label>This is a label with a longer text.</label> 
 
</div>

來源

2016-07-19 14:34:10 IE5Master

在這種情況下，我需要200px的固定寬度。使用您的解決方案，標籤會在第一行對齊，但在換行之後，它會在複選框下方繼續。 – DrRumpus

您可以在CSS中添加標籤和調整寬度你想

div { 
 
    display: table; 
 
} 
 
div input, 
 
div label { 
 
    display: table-cell; 
 
} 
 

 
label { 
 
    display: inline-block; 
 
    width: 300px; 
 
    text-align: left; 
 
}

<div> 
 
    <input type="checkbox"> 
 
    <label>This is a label.</label> 
 
</div> 
 
<div> 
 
    <input type="checkbox"> 
 
    <label>This is a label with a longer text.</label> 
 
</div>

來源

2016-07-19 14:40:21

你並不需要使用表屬性來調整這些標籤。即使您使用顯示爲表，每個內部DIV可以是錶行

來源

2016-07-19 14:41:23 user2427829

檢查此[鏈接]（https://jsfiddle.net/7g7je3hc/） – user2427829

謝謝，這也適用。 – DrRumpus

你可能只使用inline-block爲label以及（用於輸入默認顯示）並添加vertical-align。 Input不能將顯示爲table-cell也不會繼承其特定屬性。

white-space可用於保持兩個元素在同一行。

div { 
 
    width: 200px; 
 
    white-space:nowrap; 
 
} 
 
div input, 
 
div label { 
 
    vertical-align:middle;/* or top or any other value that suits your needs */ 
 
    display:inline-block;/* usefull to label */ 
 
    white-space:normal;/* reset usefull to label */ 
 
}

<div> 
 
    <input type="checkbox"> 
 
    <label>This is a label.</label> 
 
</div> 
 
<div> 
 
    <input type="checkbox"> 
 
    <label>This is a label with a longer text.</label> 
 
</div>

來源

2016-07-19 14:43:45

謝謝，這工作得很好。對於我的具體情況，我只需要將垂直對齊設置爲頂部輸入，這正是我想要的。雖然Searlea的解決方案似乎更簡單一些。 – DrRumpus

與顯示單元格標籤對齊

回答

相關問題