【发布时间】：2022-01-11 19:59:34
【问题描述】：
如何正确对齐标签，使它们从左侧开始，而其他元素保持在彼此之上？
到目前为止，我所拥有的——在图片中，你可以看到输出——是不正确的。我还在学习 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>我想要的结果：
【问题讨论】：
-
"...正确居中标签，使它们从左侧开始，而其他元素保持在彼此之上" - 你能显示调整后的图像吗？你的意思的一个例子？标签应该如何“居中”和“从左边开始”？还有哪些其他元素应该“在彼此之上”？还有
<div class="opening-hoenter image description hereurs">，我认为粘贴代码时您的类名不正确？由于您的 HTML 中有重复的id属性以及多个class属性（您只能有一个，否则其中一个将被覆盖），您的 HTML 也会无效 -
现在不太推荐的方法，但可行的是使用 HTML 表格。最好使用 div，因此请在 google 上搜索如何使用 div 来实现您所需要的。也有基于列布局的 CSS 的高级概念。
-
对不起，问题的说明不正确，我希望通过添加的结果图像，我希望它现在会更清楚。 @大卫托马斯
-
HTML 可以完全更改，还是必须如图所示？顺便说一句，如果您将 CSS 放在 HTML 之外，您将成为一个更快乐的开发人员。
-
@DavidThomas 确定可以更改。 :)
标签： html css flexbox responsive-design