Question

当我点击两个代码上的[div]时，底部部分会下降，我该如何修复它以使其不会下降。单击[div]后，如何在[div]和下面的内容之间有0个边距？

它在这里： http://testblogty678.blogspot.com/

图片：http://i.imgur.com/SSITZlY.png

<a href="" style="display:block; margin: 0px 0px 0 0px;width: 50px; height: 50px; background-color:#00a0b0; color:#000000; border-top-left-radius:50px; "></a>

<a href="" style="display:block; margin: -50px 0px 0 54px;width: 50px; height: 50px; background-color:#6a4a3c; color:#000000;"></a>

<a href="" style="display:block; margin: -50px 0px 0 108px; width: 50px; height: 50px; background-color:#cc333f;color:#000000; "></a>

<a href="" style="display:block; margin: -50px 0px 0 162px; width: 50px; height: 50px; background-color:#eb6841;color:#000000; "></a>

<a href="" style="display:block; margin: -50px 0px 0 216px; width: 50px; height: 50px;background-color:#edc951;color:#000000; border-top-right-radius:50px; "></a>

<div style="width:266px;" onclick="myObject=document.getElementById('myObj5'); 
myObject.style.display='block'; this.style.display='none'">

<a style="display:block; width: 88px; height: 24px; cursor: pointer; background-color:#ffffff; color:#000000; 
border-left: 89px solid #00ffff;border-right: 89px solid #ff00ff;border-radius: 50px; "> </a>
</div>

<div id="myObj5" style="display: none;">

</div>

<a href="" target="_blank" style="display:block; margin: 0px 0px 0 0px;width: 50px; height: 50px; background-color:#00a0b0; color:#000000; " onmouseover="this.style.backgroundColor='#abe9f7'" onmouseout="this.style.backgroundColor='#00a0b0'"></a>

<a href="" target="_blank" style="display: block; margin: -50px 0px 0 54px; width: 50px; height:50px; background-color:#6a4a3c;color:#000000;" onmouseover="this.style.backgroundColor='#badac5'" onmouseout="this.style.backgroundColor='#6a4a3c'"></a>

<a href="" target="_blank" style="display:block; margin: -50px 0px 0 108px; width: 50px; height: 50px;background-color:#cc333f; color:#000000; " onmouseover="this.style.backgroundColor='#b7ab9d'" onmouseout="this.style.backgroundColor='#cc333f'"></a>

<a href="" target="_blank" style="display:block; margin: -50px 0px 0 162px; width: 50px; height: 50px; background-color:#eb6841;color:#000000;" onmouseover="this.style.backgroundColor='#4679c7'" onmouseout="this.style.backgroundColor='#eb6841'"></a>

<a href="" target="_blank" style="display:block; margin: -50px 0px 0 216px; width: 50px; height: 50px; background-color:#edc951; color:#000000;" onmouseover="this.style.backgroundColor='#45bf21'" onmouseout="this.style.backgroundColor='#edc951'"></a>

Answer 1

有两种方式。

第一方式：添加line-height: 0px;

“对象元素”是“内联元素”，其行为类似于文本。这就是为什么行高适用于此。

<div id="myObj5" style="display: none;line-height: 0px;">

第二方式：将style="display:block;"添加到对象

<object data="" type="application/x-shockwave-flash" style="display:block;" id="player1" width="266" height="24">

Answer 2

hay你尝试使用flex box css，它是一个你必须设置display：flex;在父div中，所有代码都会灵活处理您的命令，您可以在w3schools的网页上看到更多关于它的信息。

如何在按下下面的内容时单击[div]？

2 个答案: