在我的代码中有一个表格,其中我有分区,其中表格行包含水平复选框.这是我的示例代码,完整的代码在这里小提琴
HTML:
Color: |
|
CSS:
.btn { display: table - cell; }
在PC和平板电脑视图中,它看起来很完美,因为我想要,从左侧和右侧都是合理的,但在移动视图中是否可以将其分为两行以使其响应?请看小提琴.
您可以使用媒体查询将div设置为display: block;
.演示
保留您拥有的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; } }
您可能需要根据自己的喜好更改标签的对齐方式.