Javascript 如何防止react datepicker在切换时将内联元素推送到新行？

与两个相邻元素一起使用时，在第一个元素的单击事件中，第二个元素将被推到下一行

之前：

之后：

MRE：

从'react DatePicker'导入日期选择器；
常量DateRangeInput=（）=>(
);

我用各种css属性尝试了几个小时，但找不到有效的东西。我怎样才能防止这种情况

这是一个简单的例子

---

确保等待屏幕上出现“loaded”（已加载）（编译需要几秒钟）。

这在我的测试中起作用：

import DatePicker from 'react-datepicker';

const DateRangeInput = () => (
    <div css={{
        display: 'grid',
        gridTemplateColumns: '1fr 1fr',
    }}>
        <div><DatePicker /></div>
        <div><DatePicker /></div>
    </>
);

从'react DatePicker'导入日期选择器；
常量DateRangeInput=（）=>(
);

以任何你喜欢的方式添加你的风格。。。我用了情感，但你明白了

---

下面是在codesandbox链接中实现上述功能的示例。我将情感样式转换为香草css，因此它符合您的要求。

这在我的测试中有效：

import DatePicker from 'react-datepicker';

const DateRangeInput = () => (
    <div css={{
        display: 'grid',
        gridTemplateColumns: '1fr 1fr',
    }}>
        <div><DatePicker /></div>
        <div><DatePicker /></div>
    </>
);

从'react DatePicker'导入日期选择器；
常量DateRangeInput=（）=>(
);

以任何你喜欢的方式添加你的风格。。。我用了情感，但你明白了

---

下面是在codesandbox链接中实现上述功能的示例。我将情感样式转换为香草css，因此它符合您的要求。

可能使用

flex

和

maxWidth

也会有帮助

 export default function App() {
      return (
        <div>
          <h1>loaded</h1>
          <div style={{ display: "flex", maxWidth: "200px" }}>
            <DatePicker />
            <DatePicker />
          </div>
        </div>
      );
    }

导出默认函数App（）{
返回(
加载
);
}

---

沙盒：

可能使用

flex

和

maxWidth

也会有帮助

 export default function App() {
      return (
        <div>
          <h1>loaded</h1>
          <div style={{ display: "flex", maxWidth: "200px" }}>
            <DatePicker />
            <DatePicker />
          </div>
        </div>
      );
    }

导出默认函数App（）{
返回(
加载
);
}

---

---

沙盒：

您是否尝试过：

最大宽度：值

在您的

片段中

？@MenaiAlaEddine Aladdin我刚刚尝试过，但没有改变任何东西。您是否可以通过它来复制代码。您不能将CSS添加到片段中。。。这在html中适用于什么元素？@MenaiAlaEddine Aladdin我用一个沙盒链接更新了这个问题你是否尝试过：

max width:value

在你的

Fragement

中？@menailaeddine Aladdin我刚刚尝试过，但没有改变任何东西。你不能将CSS添加到片段中。。。这在html中适用于哪个元素？@MenaiAlaEddine Aladdin我用一个沙盒链接更新了这个问题为什么用

div

包装

DatePicker

？因为否则，DatePicker将脱离容器，成为多个元素。这将包含它。我不像下一个人那样喜欢div汤，但我看不出有什么办法。这在我的机器上或在大副身上都不起作用。。。您只能将两个元素放入div。。。您添加了三个，但没有包装日期选择器…@Dominik我在测试您的代码时包装了日期选择器。下面是一个关于您的代码的示例，为什么要用

div

包装

DatePicker

？因为否则，DatePicker将脱离容器并成为多个元素。这将包含它。我不像下一个人那样喜欢div汤，但我看不出有什么办法。这在我的机器上或在大副身上都不起作用。。。您只能将两个元素放入div。。。您添加了三个，但没有包装日期选择器…@Dominik我在测试您的代码时包装了日期选择器。这是一个与您的代码