Javascript 如何对齐复选框并选择？

我目前的代码如下。当我显示以下内容时，周日、周一等之后。。无法正确对齐。我怎样才能很好地对齐复选框，天，两个选择。请帮助我实现同样的目标

.选择样式{ 边框：1px实心ccc； 宽度：120px； 边界半径：3px； 溢出：隐藏； 背景：fafa urlimg/icon-select.png无重复90%50%； } .选择样式选择{ 填充：5px 8px； 宽度：130%； 边界：无； 盒影：无； 背景：透明； 背景图像：无； -webkit外观：无； } .选择样式选择：焦点{ 大纲：无； } 工作时间： 星期日 从…起 8 12 20 24 到 8 12 20 24 星期一 从…起 8 12 20 24 到 8 12 20 24 星期二 从…起 8 12 20 24 到 8 12 20 24 星期三 从…起 8 12 20 24 到 8 12 20 24

---

您可以使用如下表：

.选择样式{ 边框：1px实心ccc； 宽度：120px； 边界半径：3px； 溢出：隐藏； 背景：fafa urlimg/icon-select.png无重复90%50%； } 工作时间： 星期日 从…起 8 12 20 24 到 8 12 20 24 星期一 从…起 8 12 20 24 到 8 12 20 24 星期二 从…起 8 12 20 24 到 8 12 20 24 星期三 从…起 8 12 20 24 到 8 12 20 24 你有什么选择

有很多，比如flexbox、表格、网格等等。我更喜欢这种场景中的网格

您需要进行哪些更改

将display:grid设置为checkboxFour容器。 设置模板列，即1fr 3fr 3fr 3fr，您可以对其进行调整，fr表示我们设置为500px的总宽度的分数，或者您可以为每个列指定一个固定的大小，而不是px中的fr，%等。 移除断开标记 CSS网格是如何工作的

因为我们使用了网格模板列，它有1fr 3fr 3fr 3fr表示，第一个列元素将取1fr列，第二个3fr，第三个3fr，第四个3fr，然后第五个将再次取1fr，并再次重复。在给定的代码中

1st column = checkbox
2nd column = label
3rd column = select
4th column = select 
(Since we removed the `<br>` or it would be the 5th column element)
5th column = checkbox and so on..

工作时间： 星期日 从…起 8 12 20 24 到 8 12 20 24 星期一 从…起 8 12 20 24 到 8 12 20 24 星期二 从…起 8 12 20 24 到 8 12 20 24 星期三 从…起 8 12 20 24 到 8 12 20 24 在行类中首先换行标签&输入&选择，如下所示：

.选择样式{ 边框：1px实心ccc； 宽度：120px； 边界半径：3px； 溢出：隐藏； 背景：fafa urlimg/icon-select.png无重复90%50%； } .选择样式选择{ 宽度：130%； 边界：无； 盒影：无； 背景：透明； 背景图像：无； -webkit外观：无； } .选择样式选择：焦点{ 大纲：无； } .行{ 显示：表格行； } 桌子{ 边界塌陷：分离； } .行{ 显示：表格行； } .行选择、.行输入、.行标签{ 显示：表格单元格； 边距：0 5px 5px 0； } .表格组>标签{ 边缘底部：10px； 显示：内联块； } 工作时间： 星期日 从…起 8 12 20 24 到 8 12 20 24 星期一 从…起 8 12 20 24 到 8 12 20 24 星期二 从…起 8 12 20 24 到 8 12 20 24 星期三 从…起 8 12 20 24 到 8 12 20 24

<div class="row">
  <input type="checkbox" id="sun" style="width: 10%!important;">
  <label for="sun">Sunday</label>
  <select class="select-style">From
    <option value="08:00">08.00</option>
    <option value="12:00">12.00</option>
    <option value="20:00">20.00</option>
    <option value="24:00">24.00</option>
  </select>
  <select class="select-style">To
    <option value="08:00">08.00</option>
    <option value="12:00">12.00</option>
    <option value="20:00">20.00</option>
    <option value="24:00">24.00</option>
  </select>
</div>

.row {
  display: table-row;
}

.row select, .row input, .row label {
  display: table-cell;
  margin:0 5px 5px 0;
}