如何正确地将此标签居中以从左侧开始并且其他元素彼此相邻？

Question

如何正确对齐标签，以便它们从左侧开始，而其他元素保持在彼此之上？

到目前为止我所拥有的——在图片中，你可以看到输出——是不正确的。我还在学习CSS.

<div class="opening-hours">
  <div>
    <label style="font-size: 18px; margin-right: 20px;">Pondělí</label>
    <input class="toggle" type="checkbox" id="monday-open" name="open" class="js-toggle" style="display:inline-block; padding-top: 5px; margin-right: 20px;" />
    <label for="times" style="font-size: 18px; margin-right: 2%;">Od</label>
    <select name="timepicker" id="monday-from" class="timepicker" style="margin-right: 2%;"></select>
    <label for="times" style="font-size: 18px; margin-right: 2%;">Do</label>
    <select name="timepicker" id="monday-from" class="timepicker" style="margin-right: 2%;"></select>
  </div>
  <div style="display:block"></div>
  <div>
    <label style="font-size: 18px; margin-right: 20px;">Úterý</label>
    <input class="toggle" type="checkbox" id="tuesday-open" name="open" class="js-toggle" style="display:inline-block; padding-top: 5px; margin-right: 20px;" />
    <label for="times" style="font-size: 18px; margin-right: 2%;">Od</label>
    <select name="timepicker" id="tuesday-from" class="timepicker" style="margin-right: 2%;"></select>
    <label for="times" style="font-size: 18px; margin-right: 2%;">Do</label>
    <select name="timepicker" id="tuesday-to" class="timepicker" style="margin-right: 2%;"></select>
  </div>
</div>

我想要的结果：

Answer 1

首先，也是最重要的，删除所有内联边距设置。然后你可以转到你的 CSS 文件并在你的 parent opening-hoenter 上设置 display: flex;。我会将此 flex-direction 设置为 column。然后你可以用 row flex-direction 弯曲每个 child div 并设置 15px 的间隙。这确保每一行都以相同的间距对齐。现在您可以在 div #2 上设置行内边距以将两者垂直对齐。我在第二个 div.

上设置 margin-left: .9rem;

.opening-hoenter {
  display: flex;
  flex-direction: column;
}

.opening-hoenter > div {
  display: flex;
  flex-direction: row;
  gap: 15px;
}

<div class="opening-hoenter image description hereurs">
  <div>
    <label style="font-size: 18px;">Pondělí</label>
    <input class="toggle" type="checkbox" id="monday-open" name="open" class="js-toggle" />
    <label for="times" style="font-size: 18px;">Od</label>
    <select name="timepicker" id="monday-from" class="timepicker"></select>
    <label for="times" style="font-size: 18px;">Do</label>
    <select name="timepicker" id="monday-from" class="timepicker"></select>
  </div>

  <div style="margin-left: .9rem;">
    <label style="font-size: 18px;">Úterý</label>
    <input class="toggle" type="checkbox" id="tuesday-open" name="open" class="js-toggle" />
    <label for="times" style="font-size: 18px;">Od</label>
    <select name="timepicker" id="tuesday-from" class="timepicker"></select>
    <label for="times" style="font-size: 18px;">Do</label>
    <select name="timepicker" id="tuesday-to" class="timepicker"></select>
  </div>
</div>

另一种选择是使用相同的布局，而不是 div #2 上的 inline-margin，您可以将标签设置为普遍具有相同的宽度，以便之后的所有元素对齐因为标签的动态宽度设置为 10%。您可以在该标签上设置 id 来定义它。在这个前。我叫它 #fixed-label

在此处查看该版本。

.opening-hoenter {
  display: flex;
  flex-direction: column;
}

.opening-hoenter > div {
  display: flex;
  flex-direction: row;
  gap: 15px;
}

label#fixed-label {
  width: 10%;
}

<div class="opening-hoenter image description hereurs">
  <div>
    <label style="font-size: 18px;" id="fixed-label">Pondělí</label>
    <input class="toggle" type="checkbox" id="monday-open" name="open" class="js-toggle" />
    <label for="times" style="font-size: 18px;">Od</label>
    <select name="timepicker" id="monday-from" class="timepicker"></select>
    <label for="times" style="font-size: 18px;">Do</label>
    <select name="timepicker" id="monday-from" class="timepicker"></select>
  </div>

  <div>
    <label style="font-size: 18px;" id="fixed-label">Úterý</label>
    <input class="toggle" type="checkbox" id="tuesday-open" name="open" class="js-toggle" />
    <label for="times" style="font-size: 18px;">Od</label>
    <select name="timepicker" id="tuesday-from" class="timepicker"></select>
    <label for="times" style="font-size: 18px;">Do</label>
    <select name="timepicker" id="tuesday-to" class="timepicker"></select>
  </div>
</div>

Answer 2

首先了解是什么弄乱了对齐；这主要是由标签的可变宽度引起的。一种不使用复杂 CSS 属性的非常基本的解决方案是简单地为该标签提供固定宽度。

label {
  display: inline-block;
  width: 50px;
  font-size: 18px;
  margin: 0 10px;
}

<div class="opening-hours">
  <div>
    <label class="label-container">Pondělí</label>
    <input class="toggle" type="checkbox" id="monday-open" name="open" class="js-toggle" />
    <label for="times">Od</label>
    <select name="timepicker" id="monday-from" class="timepicker"></select>
    <label for="times">Do</label>
    <select name="timepicker" id="monday-from" class="timepicker"></select>
  </div>
  <div>
    <label>Úterý</label>
    <input class="toggle" type="checkbox" id="tuesday-open" name="open" class="js-toggle" />
    <label for="times">Od</label>
    <select name="timepicker" id="tuesday-from" class="timepicker"></select>
    <label for="times">Do</label>
    <select name="timepicker" id="tuesday-to" class="timepicker"></select>
  </div>
</div>

注意：如果您必须在多个标签上重复相同的样式，请避免使用内联 CSS。相反，请尝试使用类.

Answer 3

一种方法如下，使用CSS网格布局：

/* generic CSS reset, so some of the browser defaults
   are overridden to maximise consistency across browsers: */

*,
 ::before,
 ::after {
  box-sizing: border-box;
  font: normal 1rem / 1.5 sans-serif;
  margin: 0;
  padding: 0;
}


/* moving the CSS out of the HTML, in order that all common CSS can
   be easily updated in one place: */

.opening-hours {
  font-size: 18px;
}

.opening-hours>div {
  /* Using CSS Grid layout: */
  display: grid;
  /* defining gaps between adjacent rows to be 1em
     and the gaps between adjacent cells in columns
     to be 0.5em (this is for left-to-right, top-to-bottom
     languages): */
  gap: 1em 0.5em;
  /* we create three columns, each column taking one
     fractional unit of the available space: */
  grid-template-columns: repeat(3, 1fr);
  /* 1em margin above and below the element, and
     auto margins either side in order to horizontally
     center the element within its parent: */
  margin: 1em auto;
  padding: 0.5em;
  /* allowing the width to vary from 30em (minimum) to 90vw
     (viewport-width units, maximum) with a preferred size of
     900px within the minimum and maximum constraints: */
  width: clamp(30em, 900px, 90vw);
}


/* just to help visualise the layout: */

label {
  border: 1px solid #000;
  border-radius: 0.5em;
  padding: 0.5em;
}


/* to ensure visibility of the :focus indicator should the client
   be using keyboard navigation: */

:focus-visible {
  outline-width: 2px;
  outline-style: solid;
  outline-color: #f90;
  outline-offset: 0.1em;
}

<div class="opening-hours">
  <div>
    <label for="monday-open">Pondělí
      <input type="checkbox" id="monday-open" name="open">
    </label>
    <label>Od
      <select name="timepicker" id="monday-from" class="timepicker"><option>00:00</option><option>00:15</option><option>00:30</option><option>00:45</option><option>01:00</option><option>01:15</option><option>01:30</option><option>01:45</option><option>02:00</option><option>02:15</option><option>02:30</option><option>02:45</option><option>03:00</option><option>03:15</option><option>03:30</option><option>03:45</option><option>04:00</option><option>04:15</option><option>04:30</option><option>04:45</option><option>05:00</option><option>05:15</option><option>05:30</option><option>05:45</option><option>06:00</option><option>06:15</option><option>06:30</option><option>06:45</option><option>07:00</option><option>07:15</option><option>07:30</option><option>07:45</option><option>08:00</option><option>08:15</option><option>08:30</option><option>08:45</option><option>09:00</option><option>09:15</option><option>09:30</option><option>09:45</option><option>10:00</option><option>10:15</option><option>10:30</option><option>10:45</option><option>11:00</option><option>11:15</option><option>11:30</option><option>11:45</option><option>12:00</option><option>12:15</option><option>12:30</option><option>12:45</option><option>13:00</option><option>13:15</option><option>13:30</option><option>13:45</option><option>14:00</option><option>14:15</option><option>14:30</option><option>14:45</option><option>15:00</option><option>15:15</option><option>15:30</option><option>15:45</option><option>16:00</option><option>16:15</option><option>16:30</option><option>16:45</option><option>17:00</option><option>17:15</option><option>17:30</option><option>17:45</option><option>18:00</option><option>18:15</option><option>18:30</option><option>18:45</option><option>19:00</option><option>19:15</option><option>19:30</option><option>19:45</option><option>20:00</option><option>20:15</option><option>20:30</option><option>20:45</option><option>21:00</option><option>21:15</option><option>21:30</option><option>21:45</option><option>22:00</option><option>22:15</option><option>22:30</option><option>22:45</option><option>23:00</option><option>23:15</option><option>23:30</option><option>23:45</option></select>
    </label>
    <label>Do
      <select name="timepicker" id="monday-to" class="timepicker"><option>00:00</option><option>00:15</option><option>00:30</option><option>00:45</option><option>01:00</option><option>01:15</option><option>01:30</option><option>01:45</option><option>02:00</option><option>02:15</option><option>02:30</option><option>02:45</option><option>03:00</option><option>03:15</option><option>03:30</option><option>03:45</option><option>04:00</option><option>04:15</option><option>04:30</option><option>04:45</option><option>05:00</option><option>05:15</option><option>05:30</option><option>05:45</option><option>06:00</option><option>06:15</option><option>06:30</option><option>06:45</option><option>07:00</option><option>07:15</option><option>07:30</option><option>07:45</option><option>08:00</option><option>08:15</option><option>08:30</option><option>08:45</option><option>09:00</option><option>09:15</option><option>09:30</option><option>09:45</option><option>10:00</option><option>10:15</option><option>10:30</option><option>10:45</option><option>11:00</option><option>11:15</option><option>11:30</option><option>11:45</option><option>12:00</option><option>12:15</option><option>12:30</option><option>12:45</option><option>13:00</option><option>13:15</option><option>13:30</option><option>13:45</option><option>14:00</option><option>14:15</option><option>14:30</option><option>14:45</option><option>15:00</option><option>15:15</option><option>15:30</option><option>15:45</option><option>16:00</option><option>16:15</option><option>16:30</option><option>16:45</option><option>17:00</option><option>17:15</option><option>17:30</option><option>17:45</option><option>18:00</option><option>18:15</option><option>18:30</option><option>18:45</option><option>19:00</option><option>19:15</option><option>19:30</option><option>19:45</option><option>20:00</option><option>20:15</option><option>20:30</option><option>20:45</option><option>21:00</option><option>21:15</option><option>21:30</option><option>21:45</option><option>22:00</option><option>22:15</option><option>22:30</option><option>22:45</option><option>23:00</option><option>23:15</option><option>23:30</option><option>23:45</option></select>
    </label>
    <label>Úterý
      <input class="toggle js-toggle" type="checkbox" id="tuesday-open" name="open">
    </label>
    <label>Od
      <select name="timepicker" id="tuesday-from" class="timepicker"><option>00:00</option><option>00:15</option><option>00:30</option><option>00:45</option><option>01:00</option><option>01:15</option><option>01:30</option><option>01:45</option><option>02:00</option><option>02:15</option><option>02:30</option><option>02:45</option><option>03:00</option><option>03:15</option><option>03:30</option><option>03:45</option><option>04:00</option><option>04:15</option><option>04:30</option><option>04:45</option><option>05:00</option><option>05:15</option><option>05:30</option><option>05:45</option><option>06:00</option><option>06:15</option><option>06:30</option><option>06:45</option><option>07:00</option><option>07:15</option><option>07:30</option><option>07:45</option><option>08:00</option><option>08:15</option><option>08:30</option><option>08:45</option><option>09:00</option><option>09:15</option><option>09:30</option><option>09:45</option><option>10:00</option><option>10:15</option><option>10:30</option><option>10:45</option><option>11:00</option><option>11:15</option><option>11:30</option><option>11:45</option><option>12:00</option><option>12:15</option><option>12:30</option><option>12:45</option><option>13:00</option><option>13:15</option><option>13:30</option><option>13:45</option><option>14:00</option><option>14:15</option><option>14:30</option><option>14:45</option><option>15:00</option><option>15:15</option><option>15:30</option><option>15:45</option><option>16:00</option><option>16:15</option><option>16:30</option><option>16:45</option><option>17:00</option><option>17:15</option><option>17:30</option><option>17:45</option><option>18:00</option><option>18:15</option><option>18:30</option><option>18:45</option><option>19:00</option><option>19:15</option><option>19:30</option><option>19:45</option><option>20:00</option><option>20:15</option><option>20:30</option><option>20:45</option><option>21:00</option><option>21:15</option><option>21:30</option><option>21:45</option><option>22:00</option><option>22:15</option><option>22:30</option><option>22:45</option><option>23:00</option><option>23:15</option><option>23:30</option><option>23:45</option></select>
    </label>
    <label>Do
      <select name="timepicker" id="tuesday-to" class="timepicker"><option>00:00</option><option>00:15</option><option>00:30</option><option>00:45</option><option>01:00</option><option>01:15</option><option>01:30</option><option>01:45</option><option>02:00</option><option>02:15</option><option>02:30</option><option>02:45</option><option>03:00</option><option>03:15</option><option>03:30</option><option>03:45</option><option>04:00</option><option>04:15</option><option>04:30</option><option>04:45</option><option>05:00</option><option>05:15</option><option>05:30</option><option>05:45</option><option>06:00</option><option>06:15</option><option>06:30</option><option>06:45</option><option>07:00</option><option>07:15</option><option>07:30</option><option>07:45</option><option>08:00</option><option>08:15</option><option>08:30</option><option>08:45</option><option>09:00</option><option>09:15</option><option>09:30</option><option>09:45</option><option>10:00</option><option>10:15</option><option>10:30</option><option>10:45</option><option>11:00</option><option>11:15</option><option>11:30</option><option>11:45</option><option>12:00</option><option>12:15</option><option>12:30</option><option>12:45</option><option>13:00</option><option>13:15</option><option>13:30</option><option>13:45</option><option>14:00</option><option>14:15</option><option>14:30</option><option>14:45</option><option>15:00</option><option>15:15</option><option>15:30</option><option>15:45</option><option>16:00</option><option>16:15</option><option>16:30</option><option>16:45</option><option>17:00</option><option>17:15</option><option>17:30</option><option>17:45</option><option>18:00</option><option>18:15</option><option>18:30</option><option>18:45</option><option>19:00</option><option>19:15</option><option>19:30</option><option>19:45</option><option>20:00</option><option>20:15</option><option>20:30</option><option>20:45</option><option>21:00</option><option>21:15</option><option>21:30</option><option>21:45</option><option>22:00</option><option>22:15</option><option>22:30</option><option>22:45</option><option>23:00</option><option>23:15</option><option>23:30</option><option>23:45</option></select>
    </label>
  </div>
</div>

JS Fiddle demo.

值得注意的是，我在 HTML 中包含了时间，删除了重复的 class 属性，删除了 <label> 中的 for 属性，因为他们都引用相同的 times 元素（HTML 中不存在），因为它既无效又无法工作。由于 <input> 和 <select> 元素现在包含在 <label> 中，因此 <label> 与其嵌套元素之间的关联是隐式的，不需要使用 for属性；因此它现在无需将 id 属性分配给各种交互式表单元素即可工作。

刚刚再次查看了您的问题，我意识到您似乎希望标签文本位于嵌套的 <input> 或 <select> 元素的左侧；为此，为 <label> 元素添加到 CSS 的以下两行应该满足该要求：

label {
  display: flex;
  justify-content: space-between;
}

*,
 ::before,
 ::after {
  box-sizing: border-box;
  font: normal 1rem / 1.5 sans-serif;
  margin: 0;
  padding: 0;
}

.opening-hours {
  font-size: 18px;
}

.opening-hours > div {
  display: grid;
  gap: 1em 0.5em;
  grid-template-columns: repeat(3, 1fr);
  margin: 1em auto;
  padding: 0.5em;
  width: clamp(30em, 900px, 90vw);
}

label {
  display: flex;
  justify-content: space-between;
  border: 1px solid #000;
  border-radius: 0.5em;
  padding: 0.5em;
}

:focus-visible {
  outline-width: 2px;
  outline-style: solid;
  outline-color: #f90;
  outline-offset: 0.1em;
}

<div class="opening-hours">
  <div>
    <label for="monday-open">Pondělí
      <input type="checkbox" id="monday-open" name="open">
    </label>
    <label>Od
      <select name="timepicker" id="monday-from" class="timepicker"><option>00:00</option><option>00:15</option><option>00:30</option><option>00:45</option><option>01:00</option><option>01:15</option><option>01:30</option><option>01:45</option><option>02:00</option><option>02:15</option><option>02:30</option><option>02:45</option><option>03:00</option><option>03:15</option><option>03:30</option><option>03:45</option><option>04:00</option><option>04:15</option><option>04:30</option><option>04:45</option><option>05:00</option><option>05:15</option><option>05:30</option><option>05:45</option><option>06:00</option><option>06:15</option><option>06:30</option><option>06:45</option><option>07:00</option><option>07:15</option><option>07:30</option><option>07:45</option><option>08:00</option><option>08:15</option><option>08:30</option><option>08:45</option><option>09:00</option><option>09:15</option><option>09:30</option><option>09:45</option><option>10:00</option><option>10:15</option><option>10:30</option><option>10:45</option><option>11:00</option><option>11:15</option><option>11:30</option><option>11:45</option><option>12:00</option><option>12:15</option><option>12:30</option><option>12:45</option><option>13:00</option><option>13:15</option><option>13:30</option><option>13:45</option><option>14:00</option><option>14:15</option><option>14:30</option><option>14:45</option><option>15:00</option><option>15:15</option><option>15:30</option><option>15:45</option><option>16:00</option><option>16:15</option><option>16:30</option><option>16:45</option><option>17:00</option><option>17:15</option><option>17:30</option><option>17:45</option><option>18:00</option><option>18:15</option><option>18:30</option><option>18:45</option><option>19:00</option><option>19:15</option><option>19:30</option><option>19:45</option><option>20:00</option><option>20:15</option><option>20:30</option><option>20:45</option><option>21:00</option><option>21:15</option><option>21:30</option><option>21:45</option><option>22:00</option><option>22:15</option><option>22:30</option><option>22:45</option><option>23:00</option><option>23:15</option><option>23:30</option><option>23:45</option></select>
    </label>
    <label>Do
      <select name="timepicker" id="monday-to" class="timepicker"><option>00:00</option><option>00:15</option><option>00:30</option><option>00:45</option><option>01:00</option><option>01:15</option><option>01:30</option><option>01:45</option><option>02:00</option><option>02:15</option><option>02:30</option><option>02:45</option><option>03:00</option><option>03:15</option><option>03:30</option><option>03:45</option><option>04:00</option><option>04:15</option><option>04:30</option><option>04:45</option><option>05:00</option><option>05:15</option><option>05:30</option><option>05:45</option><option>06:00</option><option>06:15</option><option>06:30</option><option>06:45</option><option>07:00</option><option>07:15</option><option>07:30</option><option>07:45</option><option>08:00</option><option>08:15</option><option>08:30</option><option>08:45</option><option>09:00</option><option>09:15</option><option>09:30</option><option>09:45</option><option>10:00</option><option>10:15</option><option>10:30</option><option>10:45</option><option>11:00</option><option>11:15</option><option>11:30</option><option>11:45</option><option>12:00</option><option>12:15</option><option>12:30</option><option>12:45</option><option>13:00</option><option>13:15</option><option>13:30</option><option>13:45</option><option>14:00</option><option>14:15</option><option>14:30</option><option>14:45</option><option>15:00</option><option>15:15</option><option>15:30</option><option>15:45</option><option>16:00</option><option>16:15</option><option>16:30</option><option>16:45</option><option>17:00</option><option>17:15</option><option>17:30</option><option>17:45</option><option>18:00</option><option>18:15</option><option>18:30</option><option>18:45</option><option>19:00</option><option>19:15</option><option>19:30</option><option>19:45</option><option>20:00</option><option>20:15</option><option>20:30</option><option>20:45</option><option>21:00</option><option>21:15</option><option>21:30</option><option>21:45</option><option>22:00</option><option>22:15</option><option>22:30</option><option>22:45</option><option>23:00</option><option>23:15</option><option>23:30</option><option>23:45</option></select>
    </label>
    <label>Úterý
      <input class="toggle js-toggle" type="checkbox" id="tuesday-open" name="open">
    </label>
    <label>Od
      <select name="timepicker" id="tuesday-from" class="timepicker"><option>00:00</option><option>00:15</option><option>00:30</option><option>00:45</option><option>01:00</option><option>01:15</option><option>01:30</option><option>01:45</option><option>02:00</option><option>02:15</option><option>02:30</option><option>02:45</option><option>03:00</option><option>03:15</option><option>03:30</option><option>03:45</option><option>04:00</option><option>04:15</option><option>04:30</option><option>04:45</option><option>05:00</option><option>05:15</option><option>05:30</option><option>05:45</option><option>06:00</option><option>06:15</option><option>06:30</option><option>06:45</option><option>07:00</option><option>07:15</option><option>07:30</option><option>07:45</option><option>08:00</option><option>08:15</option><option>08:30</option><option>08:45</option><option>09:00</option><option>09:15</option><option>09:30</option><option>09:45</option><option>10:00</option><option>10:15</option><option>10:30</option><option>10:45</option><option>11:00</option><option>11:15</option><option>11:30</option><option>11:45</option><option>12:00</option><option>12:15</option><option>12:30</option><option>12:45</option><option>13:00</option><option>13:15</option><option>13:30</option><option>13:45</option><option>14:00</option><option>14:15</option><option>14:30</option><option>14:45</option><option>15:00</option><option>15:15</option><option>15:30</option><option>15:45</option><option>16:00</option><option>16:15</option><option>16:30</option><option>16:45</option><option>17:00</option><option>17:15</option><option>17:30</option><option>17:45</option><option>18:00</option><option>18:15</option><option>18:30</option><option>18:45</option><option>19:00</option><option>19:15</option><option>19:30</option><option>19:45</option><option>20:00</option><option>20:15</option><option>20:30</option><option>20:45</option><option>21:00</option><option>21:15</option><option>21:30</option><option>21:45</option><option>22:00</option><option>22:15</option><option>22:30</option><option>22:45</option><option>23:00</option><option>23:15</option><option>23:30</option><option>23:45</option></select>
    </label>
    <label>Do
      <select name="timepicker" id="tuesday-to" class="timepicker"><option>00:00</option><option>00:15</option><option>00:30</option><option>00:45</option><option>01:00</option><option>01:15</option><option>01:30</option><option>01:45</option><option>02:00</option><option>02:15</option><option>02:30</option><option>02:45</option><option>03:00</option><option>03:15</option><option>03:30</option><option>03:45</option><option>04:00</option><option>04:15</option><option>04:30</option><option>04:45</option><option>05:00</option><option>05:15</option><option>05:30</option><option>05:45</option><option>06:00</option><option>06:15</option><option>06:30</option><option>06:45</option><option>07:00</option><option>07:15</option><option>07:30</option><option>07:45</option><option>08:00</option><option>08:15</option><option>08:30</option><option>08:45</option><option>09:00</option><option>09:15</option><option>09:30</option><option>09:45</option><option>10:00</option><option>10:15</option><option>10:30</option><option>10:45</option><option>11:00</option><option>11:15</option><option>11:30</option><option>11:45</option><option>12:00</option><option>12:15</option><option>12:30</option><option>12:45</option><option>13:00</option><option>13:15</option><option>13:30</option><option>13:45</option><option>14:00</option><option>14:15</option><option>14:30</option><option>14:45</option><option>15:00</option><option>15:15</option><option>15:30</option><option>15:45</option><option>16:00</option><option>16:15</option><option>16:30</option><option>16:45</option><option>17:00</option><option>17:15</option><option>17:30</option><option>17:45</option><option>18:00</option><option>18:15</option><option>18:30</option><option>18:45</option><option>19:00</option><option>19:15</option><option>19:30</option><option>19:45</option><option>20:00</option><option>20:15</option><option>20:30</option><option>20:45</option><option>21:00</option><option>21:15</option><option>21:30</option><option>21:45</option><option>22:00</option><option>22:15</option><option>22:30</option><option>22:45</option><option>23:00</option><option>23:15</option><option>23:30</option><option>23:45</option></select>
    </label>
  </div>
</div>

JS Fiddle demo.

参考文献：

参考书目：

"A Complete Guide to Flexbox," (CSS-技巧).
"A Complete Guide to Grid," (CSS-技巧).
"Basic concepts of flexbox," (MDN)。
"CSS Grid Layout,"（Mozilla 开发者网络）。

Answer 4

您可以在 https://www.w3schools.com/html/default.asp 上找到帮助。你只需要看看

如何正确地将此标签居中以从左侧开始并且其他元素彼此相邻？

How to properly center this labels to start from left and other elements stay next to each other?

html

css

flexbox

responsive-design