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重叠。即改变左边：20px到png的宽度再加上一些填充量;

隐藏/显示同级时，防止居中文本移动

2 个答案: