Html 为什么当我将鼠标放在第一个项目上时它会向左移动

发布于08月12日

我是编程新手，我想做一个导航栏，名字在导航栏的左边，其他导航项目在右边.我在物品上放了transfer:scale()个特效，右边所有的效果都很好，但当动画发生时，左边的那个移到了左边.请帮助我如何修复它，这样导航就不会伸展到左边，所以它的工作方式就像右边一样.

nav {
  display: flex;
  padding: 30px;
  overflow: hidden;
  justify-content: flex-start;
  background-color: lightblue;
}

nav a {
  line-height: 19px;
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
  text-decoration: none;
  color: black;
  font-family: "Goudy Old Style";
  padding: 0px 14px 0 14px;
}

nav a:not(#logo) {
  text-align: center;
}

nav a:hover {
  color: #b3d0ff;
  transform: scale(1.1);
}

<nav>
  <a id="logo" style="flex:1" href="index.html">Hidden Logo</a>
  <a href="en.html">EN</a>
  <a href="#contact">CONTACT</a>
  <a href="#portfolioo">PORTFOLIO</a>
  <a href="#about">ABOUT</a>
  <a href="index.html">HOME</a>
</nav>

抱歉，代码太乱了.

nav { display: flex; padding: 30px; overflow: hidden; justify-content: flex-start; background-color: lightblue; } nav a { line-height: 19px; transition-property: all; transition-duration: 0.5s; transition-timing-function: ease-in-out; transition-delay: 0s; text-decoration: none; color: black; font-family: "Goudy Old Style"; padding: 0px 14px 0 14px; } nav a:nth-child(2) { margin-left: auto; } nav a:not(#logo) { text-align: center; } nav a:hover { color: #b3d0ff; transform: scale(1.1); }

<nav> <a id="logo" href="index.html">Hidden Logo</a> <a href="en.html">EN</a> <a href="#contact">CONTACT</a> <a href="#portfolioo">PORTFOLIO</a> <a href="#about">ABOUT</a> <a href="index.html">HOME</a> </nav>

Html 为什么当我将鼠标放在第一个项目上时它会向左移动

推荐答案

Html相关问答推荐

使用网格时图像溢出容器高度

未显示新组件的视图

如何实现弯曲的梯形导航栏？

为所有必填字段添加所需的占位符文本(Angular Material)

使用css第n个子元素，如何迭代Y组中的X个元素？

我希望创建一个对角手风琴与不同的内容(文本和图像)在其正常状态和其他元素悬停

如何从elementor中的滑块中获取文本？

创建特定的CSS网格布局

如何制作带有粘性头和脚的可滚动车身

如何制作'；在第'；页中搜索；是否发现多个元素中的单词？

页面文件夹内的 HTML 页面未加载主目录的 style.css

添加带有悬停动画的喜欢图标

：after 伪元素没有出现，即使它有 content 属性

如何使用 Flutter 构建 Chrome 扩展？

调整屏幕大小时标题在图像下方重叠 - HTML

辅助功能：alt 或 alt="" 用于装饰图像

如何在 Tailwind CSS 中创建响应式网格布局？

正确使用视频作为背景

为什么浏览器在 Select 一个包裹在  标签中的块级元素后包含相邻元素？

使用 CSS 的发光边框动画没有流畅的过渡