Angular项目中HTML日期输入模块布局间距调整问题

使用Flex布局修改外层容器样式即可实现需求，无需调整现有DOM结构，修改后代码如下：

<div class="center" style="margin-top:50px; display: flex; justify-content: space-around; gap: 2rem; max-width: 700px; margin: 50px auto 0;">
    <label class='input-w' for='start-date'>
      <span class='label'><b>Start Date</b></span>
      <input type="date" id="start-date" name="start-date" style="width: 200px;">
    </label>
    
    <label class='input-w' for='end-date' >
      <span class='label'><b>End Date</b></span>
      <input type="date" id="end-date" name="end-date" style="width: 200px;">
    </label>
    
</div>

样式说明 #

• display: flex：让两个label子元素默认水平排列在同一行
• justify-content: space-around：子元素在容器内均匀分布，自动实现开始日期模块中偏左、结束日期模块中偏右的布局
• gap: 2rem：固定两个模块之间的最小间距，避免窗口宽度过小时两个模块相互重叠
• max-width: 700px + margin: 50px auto 0：限制外层容器最大宽度，同时让容器本身在页面水平居中，避免窗口过宽时两个模块间距过大

如果你的项目有单独的样式文件，也可以把行内样式抽离到.center类的样式规则中：

.center {
  margin-top: 50px;
  display: flex;
  justify-content: space-around;
  gap: 2rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

内容的提问来源于stack exchange，提问作者Hammy