Question

我正在开发一个侧面有菜单的html网站，当我按下菜单按钮时，我想在菜单一侧隐藏div弹出窗口，但是当它这样做时，它会将所有内容都移动。

以下是一些代码：

<div style="display:none; padding-left:670px; padding-right:5px; float:left" id="second">
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />

    <font color="#33FF66"><h2 style="cursor:pointer" onclick="showabout()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2></font>

    <font color="#33FF66"><h2 style="cursor:pointer" onclick="showabout()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2></font><br />

    <font color="#33FF66"><h2 style="cursor:pointer" onclick="showabout()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2></font>

</div>

function showabout(){
    show = document.getElementById("aboutus");
    show.style.display = "block";
    }

<div style="display:none; padding-left:20px; float:left" id="aboutus">
    <h2>Hey</h2>
</div>

因此，当我按下三个h2标记中的任意一个时，它会执行showabout()。它显示了隐藏的hello标签，但这会移动所有关于如何不移动任何东西的想法吗？

Answer 1

根据定义，

div是block level element。如果您不想在其后面换行，则需要将其设置为display: inline;。（show.style.display = "inline";）

Answer 2

删除这些字体标记。

2

<div style="display:none; padding-left:20px; position:absolute; top: 100px; left:100px;" id="aboutus">
<h2>Hey</h2></div>

您必须使用像素值，但这将允许该div的弹出效果。我建议你做一些定位教程来了解它是如何工作的。

http://www.alistapart.com/articles/css-positioning-101/

将div放在同一行的html

2 个答案: