當隱藏/顯示兄弟文件時，防止居中的文本移動

Question

我們有一個div，用作在中間具有標題的水平標題欄。它還有一個左對齊的鏈接，稱爲「設置」，僅當鼠標懸停在標題欄上時才顯示。問題是顯示設置鏈接時，標題移動。

下面是一個示例/ w jQuery - 無論設置是否顯示，我們如何保持clocks的標題是固定的？

<script type="text/javascript"> 
    $(function() { 
     var settings = $(".settings"); 
     $(".titlebar") 
      .mouseover(function(){ 
       settings.css("display", "inline"); 
      }) 
      .mouseout(function(){ 
       settings.css("display", "none"); 
      }); 
    }); 
</script> 
<style type="text/css"> 
    .titlebar {text-align: center; width: 300px;} 
    .icon {float: left;} 
    .settings {float: left; display: none;} 
    .title {margin-right: 10px;} 
</style> 

... 

<div class="titlebar"> 
    <img class="icon" src="icon.png"></img> 
    <a class="settings">settings</a> 
    <a class="title">clocks</a> 
</div>

Answer 1

嘗試使用絕對定位是這樣的：

<style type="text/css"> 
    .titlebar { 
     text-align: center; 
     width: 300px; 
     position: relative; 
    } 
    .icon {float: left;} 
    .settings { 
     display: none; 
     position: absolute; 
     left: 0; 
    } 
    .title {margin-right: 10px;} 
</style> 

Answer 2

絕對定位：

<style type="text/css"> 
    .titlebar { position:relative; text-align: center; width: 300px; } 
    .icon { float: left; } 
    .settings { position: absolute; left: 20px; display: none; } 
    .title { margin-right: 10px; } 
</style> 

你有絕對定位發揮得到它不重疊的PNG。即將left：20px更改爲png的寬度加上一些填充量;