Javascript 当我更改元素显示时，文本将移出div

我正在做一个项目，如果我想要单程航班或有返程航班，我必须勾选一个复选框。如果我勾选该框，我想要一个航班，因此我只有一个输入日期。如果我解开复选框，我想要一个带返回的航班，这样会出现第二个输入来填写返回日期。 当我加载我的应用程序时，该框未选中，因此我有两个输入。可用路径位于我的输入旁边，如下所示：

如果我勾选单程航班上面的复选框，则返回日期将显示，并且随着我的出发航线位置的改变，显示如下所示：

知道我是否取消选中复选框：

我的返回路线中元素的位置发生了变化，因为现在我的返回词不在中间，我的目的地在红色元素的一半之外。为什么会发生这种情况，我不能有我的第一张照片相同的状态？谢谢你的帮助

显示可用路线的我的代码：

函数showDate（）{
var checkbox=document.getElementById（“转换”）；
var backDate=document.getElementById（“返回框”）；
if（checkbox.checked==true）{
backDate.style.display=“无”；
document.getElementById（“ret”）.style.display=“无”；
document.getElementById（“返回容器”）.style.display=“无”；
document.getElementById（“可用路由”）.style.top=“300px”；
}else if（checkbox.checked==false）{
backDate.style.display=“内联块”；
document.getElementById（“ret”）.style.display=“内联块”；
document.getElementById（“返回容器”）.style.display=“内联块”；
document.getElementById（“可用路由”）.style.top=“200px”；
}
}

.date{
填充：20px；
}
#航线集装箱{
位置：相对位置；
宽度：200px；
高度：自动；
}
#航线集装箱p{
文本对齐：居中；
}
#出发集装箱#返回集装箱{
位置：相对位置；
宽度：200px；
高度：自动；
背景颜色：珊瑚；
显示器：flex；
证明内容：之间的空间；
柔性流：行换行；
填充：2px；
边界半径：5px；
}
.仪表盘{
位置：相对位置；
顶部：-3px；
}
.dep时间，.arr时间{
字体大小：20px；
}
.货柜位置{
显示器：flex；
柔性流：行；
证明内容：周围的空间；
左边距：3倍；
宽度：200px；
}
.货柜组{
字体大小：12px；
}
德斯特先生{
左边距：自动；
}
.飞机{
左边距：60像素；
垫底：3件；
}
.d2{
顶部：-3px；
}
雷特先生{
文本对齐：居中；
}

简单过渡
出发日期
返回日期
可用路线
离开

13:00 
................ 
14:00 
阿瑟
✈️ 
科斯


返回

16:00 
................ 
17:00 
科斯
✈️ 
阿瑟

尝试将javascript更改为：

 function showDate(){
        var checkbox = document.getElementById("transition");
        var backDate = document.getElementById("return-box");
        if(checkbox.checked==true){
            backDate.style.display="none";
            document.getElementById("ret").style.display="none";
            document.getElementById("return-container").style.display="none";
            document.getElementById("available-routes").style.top="300px";
        }else if (checkbox.checked==false){
            backDate.style.display="block";
            document.getElementById("ret").style.display="block";
            document.getElementById("return-container").style.display="flex";
            document.getElementById("available-routes").style.top="200px";

        }
    }

---

这是否解决了问题？

尝试将javascript更改为：

 function showDate(){
        var checkbox = document.getElementById("transition");
        var backDate = document.getElementById("return-box");
        if(checkbox.checked==true){
            backDate.style.display="none";
            document.getElementById("ret").style.display="none";
            document.getElementById("return-container").style.display="none";
            document.getElementById("available-routes").style.top="300px";
        }else if (checkbox.checked==false){
            backDate.style.display="block";
            document.getElementById("ret").style.display="block";
            document.getElementById("return-container").style.display="flex";
            document.getElementById("available-routes").style.top="200px";

        }
    }

---

这是否解决了问题？

问题似乎是javascript将“#返回容器”设置为“显示：内联块”

document.getElementById("return-container").style.display="inline-block";

而首先，它被设置为“display:flex”

#departure-container , #return-container{
  position: relative;
  width:200px;
  height: auto;
  background-color: coral;
  display: flex;
  justify-content: space-between;
  flex-flow:row wrap;
  padding:2px;
  border-radius:5px;
}

---

您应该让两者使用相同的CSS。JS应该首先设置“display:flex”或CSS为“display:inline block”。

问题似乎在于javascript将“#return container”设置为“display:inline block”

document.getElementById("return-container").style.display="inline-block";

而首先，它被设置为“display:flex”

#departure-container , #return-container{
  position: relative;
  width:200px;
  height: auto;
  background-color: coral;
  display: flex;
  justify-content: space-between;
  flex-flow:row wrap;
  padding:2px;
  border-radius:5px;
}

您应该让两者使用相同的CSS。JS应该首先设置“display:flex”或CSS为“display:inline block”