如何实现含嵌套div的两个div并排？Close Date与输入框同行方案

嘿，我完全懂你碰到的这个糟心问题——明明照着教程用了display: inline-block，结果Close Date和输入框还是各占一行，压根没法并排。这种情况我之前也踩过好几次坑，大概率是几个容易忽略的小细节在搞鬼，咱们一步步来解决：

先排查最常见的几个原因 #

1. 元素宽度超出父容器限制

如果其中一个div的宽度被设成了100%，或者两个div的宽度加起来超过了父容器的宽度，那inline-block肯定没法让它们并排。先给两个div设置合适的宽度，比如：

.text-div {
  display: inline-block;
  width: 120px; /* 根据你的需求调整 */
}
.input-container {
  display: inline-block;
  width: calc(100% - 130px); /* 留点间隙避免挤在一起 */
}

别忘了加上box-sizing: border-box;，这样padding和border会算在宽度里面，不会额外撑大元素：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

2. inline-block自带的空白间隙坑

inline-block元素之间如果有换行、空格或者制表符，浏览器会默认渲染出一个小间隙，看起来就像没对齐。解决方法有这几种：

• 把两个div的代码写在同一行：

  <div class="text-div">Close Date</div><div class="input-container">...</div>
  

• 给父元素设置font-size: 0;，再给子元素恢复正常字体大小：

  .parent {
    font-size: 0;
  }
  .text-div, .input-container {
    font-size: 16px; /* 回到你需要的字号 */
  }
  

3. 试试更省心的Flex布局替代

如果inline-block的各种小问题太麻烦，直接用Flex布局一步到位，这也是我现在优先用的方案：
给父容器加上display: flex，还能顺便解决垂直对齐的问题：

<div class="parent-container">
  <div class="text-label">Close Date</div>
  <div class="input-wrapper">
    <!-- 你的多层嵌套输入框结构 -->
    <input type="date" />
  </div>
</div>

<style>
.parent-container {
  display: flex;
  align-items: center; /* 让文本和输入框垂直居中，可选 */
  gap: 10px; /* 两个元素之间的间隙，可选 */
}

.text-label {
  /* 可以固定标签宽度，避免文本长短影响布局 */
  width: 100px;
}

.input-wrapper {
  /* 让输入框容器占满剩余空间 */
  flex: 1;
}
</style>

最后再检查一下 #

如果还是没生效，打开浏览器的开发者工具（F12），看看这两个div的实际样式有没有被其他CSS规则覆盖——比如有没有不小心加了float: left/right、position: absolute，或者父元素设置了overflow: hidden之类的冲突属性。

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