html将div放在同一行答案

【问题标题】：html putting divs on the same linehtml将div放在同一行
【发布时间】：2011-05-12 11:12:29
【问题描述】：

我正在开发一个侧面有一个菜单的 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 标签，但是这移动了所有关于如何不移动任何东西的想法？

【问题讨论】：

通过查看代码示例，您可能想查看htmldog.com 之类的内容，您永远不应该使用字体标签。

标签： html css

【解决方案1】：

div 根据定义是block level element。如果您不想在其后换行，则需要将其设置为 display: inline;。 (show.style.display = "inline";)

【讨论】：

【解决方案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/

【讨论】：