在我的代码中有一个表格,其中我有分区,其中表格行包含水平复选框.这是我的示例代码,完整代码在
Here中
HTML：
<table cellpadding="0" border="0" width="100%" cellspacing="0">
<tr>
<td style="text-align:left" width="65px"><strong> Color: </strong>
</td>
<td style="float:left; text-align:left; width:100%">
<div style="display:table; width:100%">
<div style="width:100%;display:table-row">
<input type="checkBox" />
<label class="btn"> <span>A</span>
</label>
<input type="checkBox" />
<label class="btn"> <span>B</span>
</label>
<input type="checkBox" />
<label class="btn"> <span>C</span>
</label>
<input type="checkBox" />
<label class="btn"> <span>D</span>
</label>
<input type="checkBox" />
<label class="btn"> <span>E</span>
</label>
<input type="checkBox" />
<label class="btn"> <span>F</span>
</label>
<input type="checkBox" />
<label class="btn"> <span>G</span>
</label>
<input type="checkBox" />
<label class="btn"> <span>H</span>
</label>
<input type="checkBox" />
<label class="btn"> <span>I</span>
</label>
</div>
</div>
</tr>
</table>
CSS：
.btn {
display: table - cell;
}
在PC和平板电脑视图中,它看起来很完美,因为我想要,从左侧和右侧都是合理的,但在移动视图中是否可以将其分为两行以使其响应？请看小提琴.
解决方法
您可以使用媒体查询将div设置为display：block;.
Demo
保留您拥有的css用于较大的显示,然后使用媒体查询来定位较小的显示.我建议将标签和复选框一起包装,以防止它们分开：
HTML
<div class="table-cell">
<input type="checkBox" class="checkBox" />
<label class="btn"> <span>A</span>
</label>
</div>
CSS
.table {
display: table;
width: 100%;
}
.table-row {
display: table-row;
width: 100%;
}
.table-cell {
display: table-cell;
}
@media screen and (max-width: 479px) {
.table,.table-row {
display: block;
}
.table-cell {
display:inline-block;
}
}
您可能需要根据自己的喜好更改标签的对齐方式.
