HTML Javascript CSS - div dis/appear 导致边框移动-解网

问：

我是 HTML、Javascript 和/或 CSS 的新手，当在“内部”框中选中复选框时，我正在尝试让列表出现在“外部”框中。

jsfiddle 的代码位于：

从那里，可以看到 .inner CSS 代码如下：

.inner {
    width:800px;
    height:800px;
    margin-left:auto;
    border:1px solid #000;
    position:relative;
}

我创建了两个框，一个在内框，一个在外框，当我单击“内部”框中的复选框时，我希望在“外部”框中出现一个列表。我相信我的代码是正确的，但是当列表出现时，“内”框向下移动。我将如何解决这个问题，以便当我单击复选框时，“内部”框不会移动，并且所有内容都保持在加载页面时的同一位置？

JavaScript HTML CSS 边框

<ul>是块级元素。如果你不想让它把浮动的div向下推，你需要（旧方式）让它也浮动（新方式）使用flexbox将左右部分并排放置，然后让<ul>出现在左边部分。换句话说，一个非常快速的修复是，但正确地做会更好。#CPC { float: left; }

答：

0赞 Aniketh Malyala 7/30/2021 #1

你的代码问题出在内框的 CSS 中。由于您不希望它在添加其他元素时移动，因此您需要使用：

position: absolute;

但是，我们仍然希望它保持在框内的正确位置，因此我们添加了以下 CSS：

margin-left: 200px;
top: 0px;

总体而言，您需要更改的只是将 .inner 更改为：

.inner {
    width:800px;
    height:800px;
    margin-left:200px;
    border:1px solid #000;
    position:absolute;
    top: 0px;
}

最终结果将如下所示：

HTML Javascript CSS - div dis/appear 导致边框移动