当隐藏/显示兄弟文件时,防止居中的文本移动
问题描述:
我们有一个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>
答
尝试使用绝对定位是这样的:
<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>
答
绝对定位:
<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的宽度加上一些填充量;