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

Question

我正在做一个项目，如果我想要单程航班或 return 航班，我必须勾选一个复选框。如果我勾选我想要单程航班的方框，那么我只有一个输入日期可以提供。如果我取消勾选我的框，我想要一个带有 return 的航班，所以会出现第二个输入来填充 return 日期。当我加载我的应用程序时，该框未选中，因此我有两个输入。可用路线在我的输入旁边，如下所示：

如果我为单程航班勾选上面的复选框，return 日期就会消失，并且显示如下，因为我的出发路线位置发生了变化：

知道我是否取消勾选我的复选框：

我的 return 路线中元素的位置发生了变化，因为现在我的 return 单词不在中心，我的目的地在我的红色元素之外的一半。为什么会发生这种情况，而我不能拥有与第一张照片相同的状态？非常感谢您的帮助。

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

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="inline-block";
                document.getElementById("ret").style.display="inline-block";
                document.getElementById("return-container").style.display="inline-block";
                document.getElementById("available-routes").style.top="200px";

            }
        }

.date{
  padding:20px;
}



#routes-container{
  position: relative;
  width:200px;
  height: auto;
}



#routes-container p{
  text-align:center;
}

#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;
}


.dashline{
  position:relative;
  top:-3px;
}

.dep-time , .arr-time{
  font-size: 20px;
}

.location-container{
  display: flex;
  flex-flow:row;
  justify-content: space-around;
  margin-left:3px;
  width:200px;
}

.location-container div{
  font-size:12px;
}

.dest{
  margin-left:auto;
}

.plane{
  margin-left:60px;
  padding-bottom:3px;
}

.d2{
  top:-3px;
}

.ret{
  text-align:center;
}

<div id = "check-t">
                    <label for="transition"> <span id = "simple"> <strong> Simple transition ? </strong> </span> </label>
                    <input type="checkbox" id="transition" name="transition-box" onchange="showDate()" >
                </div>


<div class="date" id="booked-dates">
                    <div id="departure-box">
                        <h3> Departure Date  </h3>
                        <input type = "date" name="dep-date" class = "booking-date" id="anaxorisi">
                    </div>
                    <div id="return-box">      
                        <h3> Return Date </h3>
                        <input type= "date" name= "return-date" class="booking-date" id="epistrofi"> 
                    </div>      
                </div>


<div class="date" id="available-routes">
  <h3> Available Routes </h3>
  <div id="routes-container">
    <p> Departure </p>
    <div id="departure-container">
      <span class="dep-time"> 13:00 </span>
      <span class="dashline">................ </span>
      <span class="arr-time"> 14:00 </span>
      <div class="location-container">
        <div> ATH </div>
        <div class="plane"> ✈️ </div>
        <div class="dest">
          KOS </div>
      </div>
    </div>
    <br/>
    <p id="ret"> Return </p>
    <div id="return-container">
      <span class="dep-time"> 16:00 </span>
      <span class="dashline d2">................ </span>
      <span class="arr-time"> 17:00 </span>
      <div class="location-container">
        <div>
          KOS</div>
        <div class="plane"> ✈️ </div>
        <div class="dest dest2"> ATH </div>
      </div>
    </div>
  </div>

即使在上面的代码片段中，这不是我的完整应用程序，我的 return 路由元素中元素的位置也会更改定位

Answer 1

尝试将 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";

        }
    }

这能解决问题吗？

Answer 2

看来问题是您的 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' 开头。

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

text moves out of div when I change element display

html

javascript

css

position