标签旁边的复选框作为表格单元格

Question

<input type="checkbox">旁边有<label>，

我希望将它们设为display: table-cell，但它们仍然位于同一列＃34;＆＃34; ，如何使其成为正确的方法？

＆＃13;

＆＃13;

.wrapper {
  border: 2px solid black;
  width: 300;
  height: 200px;
  display: table
}
		
.asRow {
  display: table-row;
}
		
.asCell {
  display: table-cell
}

＆＃13;

<div class="wrapper asTable">
  <div class="asRow">
    <input type="checkbox" value="1" id="C1" class="asCell">
    <label class="checkboxLabel" for="C1" class="asCell">I'm 1 - Started several           mistake joy say painful             removed reached end. State burst think end       are its. Arrived off she elderly beloved him affixed                 noisier         yet. An course regard to up he hardly. View four has said does men saw find           dear shy. Talent           men wicket add garden.           
    </label>	
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

这是我试图获得的显示 -

Answer 1

您可以同时提供标签和复选框 float: left;，然后为您的标签指定特定宽度;

.asCell, .checkboxLabel {
 float: left;
}

.checkboxLabel {
 width: 500px;
}

Answer 2

我不知道你为什么要把它们变成表格单元格，但无论如何这是你想要的吗？

我给复选框float: left并将标签变成一个块。

.wrapper {
    border: 2px solid black;
    width: 300;
    height: 200px;
    display: table;
}

.asRow {
    display: table-row;
}

.asCell {
    display: table-cell;
    float: left;
}

.checkboxLabel{
    display: block;
    overflow: hidden;
}

<div class="wrapper asTable">
<div class="asRow">
	<input type="checkbox" value="1" id="C1" class="asCell">
	<label class="checkboxLabel" for="C1" class="asCell">
		I'm 1 - Started several mistake joy say painful             removed reached end. State burst think end are its. Arrived off she elderly beloved him affixed                 noisier yet. An course regard to up he hardly. View four has said does men saw find dear shy. Talent           men wicket add garden.           
	</label>	
</div>
</div>