html – 滚动条上的文本中心跳转出现

2023年5月26日 192次阅读

我试图在中心制作徽标文字. .main div可能很长,并且可以在悬停时显示滚动条(
Windows).

但是,当鼠标悬停和滚动条出现时,文本徽标会跳转/更改其位置.怎么预防？要测试,请缩小浏览器高度以查看有效的滚动条.

代码：http://jsfiddle.net/qhoc/tppzm/2/

HTML：

<div class="main">
    <div class="logo">
        Logo Text
    </div>
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
</div>

CSS：

.main {
    position: fixed;
    width: 200px;
    background: gray;
    overflow: hidden;
    top: 0;
    bottom: 0;
}

.main:hover {
    overflow: auto;
}

.logo {
    text-align: center;
}

li {
    line-height: 40px;
}

要求：

>我喜欢将.logo放在中心位置,即使使用滚动条也不会改变它的位置.
>在这种情况下,不要使用JS来调整位置,也不要使用硬编码位置.

更新1：

我不太喜欢两种选择：

>位置：绝对会工作,但也搞砸了我的其他东西
> .sto上的宽度：180px将修复它但是,它也是硬代码,尽管你可以说200px也是硬编码的

最佳答案 .logo没有足够的宽度来理解它在悬停时的位置,所以为了让它意识到它应该保持在中心,它应该继承其父级的宽度.

例如,

.logo {
    text-align: center;
    width: inherit;
}

WORKING DEMO

希望这可以帮助.

PS：如果你想更改.main：hover的溢出(Scroll),可以通过在overflow-x或overflow-y上显示或隐藏它来相应地设置它.

点赞