javascript - 如何对齐复选框并选择？

Question

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

.select-style {
  border: 1px solid #ccc;
  width: 120px;
  border-radius: 3px;
  overflow: hidden;
  background: #fafafa url("img/icon-select.png") no-repeat 90% 50%;
}

.select-style select {
  padding: 5px 8px;
  width: 130%;
  border: none;
  box-shadow: none;
  background: transparent;
  background-image: none;
  -webkit-appearance: none;
}

.select-style select:focus {
  outline: none;
}

<div class="form-group">
  <label>Working Hours :</label>
  <div class="checkboxFour">
    <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>
    <br>
    <input type="checkbox" id="sun" style="width: 10%!important;">
    <label for="sun">Monday</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>
    <br>
    <input type="checkbox" id="sun" style="width: 10%!important;">
    <label for="sun">Tuesday</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>
    <br>
    <input type="checkbox" id="sun" style="width: 10%!important;">
    <label for="sun">Wednesday</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>
    <br>
  </div>
</div>

这是我当前的代码。但我无法对齐。有什么办法可以对齐吗？我是 html 和设计的新手。请帮我对齐。

Answer 1

您可以使用表格代替:

.select-style {
  border: 1px solid #ccc;
  width: 120px;
  border-radius: 3px;
  overflow: hidden;
  background: #fafafa url("img/icon-select.png") no-repeat 90% 50%;
}

<div class="form-group">
  <label>Working Hours :</label>
  <table class="checkboxFour">
    <tr>
      <td>
        <input type="checkbox" id="sun" />
      </td>
      <td>
        <label for="sun">Sunday</label>
      </td>
      <td>
        <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>
      </td>
      <td>
        <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>
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" id="sun" />
      </td>
      <td>
        <label for="sun">Monday</label>
      </td>
      <td>
        <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>
      </td>
      <td>
        <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>
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" id="sun" />
      </td>
      <td>
        <label for="sun">Tuesday</label>
      </td>
      <td>
        <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>
      </td>
      <td>
        <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>
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" id="sun" />
      </td>
      <td>
        <label for="sun">Wednesday</label>
      </td>
      <td>
        <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>
      </td>
      <td>
        <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>
      </td>
    </tr>
  </table>
</div>