CSS实现div内元素水平对齐 解决end time输入框150px尺寸不生效问题

核心问题说明 #

• size 属性是输入框可展示的字符数量，本身不支持px单位，你写的size="150px"属于无效语法，要固定输入框宽度请使用CSS的width属性设置。
• 现有布局逻辑溢出：右侧End相关的外层容器宽度仅为总宽度的48%（总宽度100%减去左外边距52%），内部两个子容器分别设置了width:50%和margin-left:52%，宽度总和超过父容器上限，导致End Time所在的容器被挤压，内部输入框宽度被限制，所以怎么修改size都不会生效。

修复后代码 #

推荐直接用flex布局实现目标效果，不需要计算margin、float，逻辑更清晰不易出错：

<div style="width: 100%; display: flex; gap: 2%;">
  <!-- 左侧Start区域 -->
  <div style="width:49%; height:50px; border: thin solid black; display: flex; align-items: center; padding: 0 10px; box-sizing: border-box;">
    <div style="width: 50%; display: flex; gap: 8px; align-items: center;">
      <label class="left">Start Date: </label>
      <input class="right" type="text" name="startDate" style="width: 150px;">
    </div>
    <div style="width: 50%; display: flex; gap: 8px; align-items: center;">
      <label class="left">Start Time: </label>
      <input class="right" type="text" name="startTime" style="width: 150px;">
    </div>
  </div>

  <!-- 右侧End区域 -->
  <div style="width:49%; height:50px; border: thin solid black; display: flex; align-items: center; padding: 0 10px; box-sizing: border-box;">
    <div style="width: 50%; display: flex; gap: 8px; align-items: center;">
      <label class="left">End Date: </label>
      <input class="right" type="text" name="endDate" style="width: 150px;">
    </div>
    <div style="width: 50%; display: flex; gap: 8px; align-items: center;">
      <label class="left">End Time: </label>
      <input class="right" type="text" name="endTime" style="width: 150px;">
    </div>
  </div>
</div>

优化点说明 #

• 用flex布局替代float，避免浮动带来的高度塌陷、宽度计算错误问题
• 用box-sizing: border-box让border和padding不会撑大容器宽度
• 输入框直接通过style="width: 150px"固定宽度，写法符合标准规范

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