javascript - 缩小时 Logo 位置发生变化(CSS/Angular4+)

Question

我有一个带有 Logo (MostafaOmar) 的导航栏，当我缩小时，位置也会移动。

尝试缩放到 70%，您会看到 Logo 的位置也会移动。

如何让它保持在 100% 时的状态？

Logo

.nav .nav-heading .brand {float: left}

Answer 1

看起来像 .container 类的父 div 的大小调整正在调整大小，这正在移动内容，包括您的 Logo 。

如果您将容器类宽度强制设置为 80%，这将解决任何调整大小的问题。您的文字可能会变大或变小，但位置会保持不变。我在您的 codepen 中进行了测试，它可以正常工作。

.container {
宽度:80%；
}

或者，由于您可能不想更改整个类，您可以向导航栏容器添加一个 ID，并以相同的方式定位其宽度。

如果有帮助请告诉我

干杯