React日期选择器无法对齐：两个Datepicker无法同行显示求助

嘿，我之前也碰到过这种情况！很多UI组件库的Datepicker组件其实会被包裹在一个自带的外层容器里，你直接给<Datepicker>标签加inline-block样式，大概率是没作用到真正控制布局的那个容器元素上，所以组件才会“忽略”你的样式设置。这里给你几个可行的解决方案：

方案一：利用组件自带的容器样式/类名Props #

很多React Datepicker组件（比如常用的react-datepicker库）都会提供专门的props来设置外层容器的样式或类名，比如wrapperClassName或者containerStyle。你可以把布局样式加到这些props上，而不是直接给组件本身加style：

// 先定义CSS类（也可以用内联样式）
<style>
  .inline-datepicker {
    display: inline-block;
    margin-right: 12px; /* 给两个组件加个间距，看起来更舒服 */
  }
</style>

// 组件调用时传递wrapperClassName
<Datepicker 
  selected={this.state.checkInDate} 
  wrapperClassName="inline-datepicker" 
/> 
<Datepicker 
  selected={this.state.checkOutDate} 
  wrapperClassName="inline-datepicker" 
/>

方案二：手动在外层包裹容器元素 #

如果你的Datepicker组件不支持设置容器样式的props，那最简单的办法就是自己给每个Datepicker套一个div，然后给这个div加inline-block样式：

<div style={{ display: 'inline-block', marginRight: '12px' }}>
  <Datepicker selected={this.state.checkInDate} />
</div>
<div style={{ display: 'inline-block' }}>
  <Datepicker selected={this.state.checkOutDate} />
</div>

方案三：强制覆盖组件默认样式 #

如果上面两种方法都不行，你可以用浏览器开发者工具（F12）查看Datepicker生成的DOM结构，找到最外层的容器类名（比如react-datepicker的外层类是react-datepicker-wrapper），然后写CSS强制覆盖默认布局样式：

.react-datepicker-wrapper {
  display: inline-block !important;
  /* 这里的!important是为了覆盖组件自带的默认样式，能写出更具体的选择器也可以不用 */
}

另外还要注意：如果父容器的宽度不足以容纳两个Datepicker组件，它们还是会自动换行，所以记得检查父元素的宽度设置哦！

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