在css中浮動導致元素向下移動但是當innerHTML被JS改變時，它會起來

Question

我有一個元素

在我的網頁上，當在樣式表中應用 Float:left 時，它的位置會向下移動。 但是，如果我使用 javascript 函數來更改內部 html，它會上升，而當向左浮動時，它顯然會上升。 不知道到底發生了什么，我是菜鳥 :P 可能的原因和建議？

html代碼是

<script type="text/javascript">
    function runonhover() {
        document.getElementById("sitename").innerHTML = "Run...!!";
    }
</script>

<div id="sitename" onmouseover="document.getElementById('sitename').innerHTML = 'Run...!!';">
    <p>FurryLife</p>
</div>

對應的css是

#sitename {
    transition: transform 0.6s;
    display: block;
    width: 50%;
    height: 100px;
    float: left;
    margin: 0px;
    padding-left: 45px;
    font-size: 56px;
    color: #fff;
    font-family: chiller,serif;
    text-shadow: rgb(185,82,19) 3px 3px 3px;
}

Answer 1

通過設置innerHTML， <p>被移除，而<p>有一些邊距，導致元素四處移動。

Answer 2

通過設置document.getElementById('sitename').innerHTML = 'Run...!!';
將設置Run...!! 並刪除內部<p></p> tag 。 使用document.getElementById('sitename').innerHTML = '<p>Run...!!</p>'; 它不會打擾您的用戶界面。

 #sitename { transition: transform 0.6s; display: block; width: 50%; height: 100px; float: left; margin: 0px; padding-left: 45px; font-size: 56px; color: #fff; font-family: chiller, serif; text-shadow: rgb(185, 82, 19) 3px 3px 3px; }

 <script type="text/javascript"> function runonhover() { document.getElementById("sitename").innerHTML = "Run...!!"; } </script> <div id="sitename" onmouseover="document.getElementById('sitename').innerHTML = '<p>Run...!!</p>';"> <p>FurryLife</p> </div>