当隐藏/显示兄弟文件时，防止居中的文本移动

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的宽度加上一些填充量;