Vue3水平导航菜单顺序颠倒及与Logo未对齐问题求助

问题1：菜单顺序颠倒 #

当前给每个<li>设置float: right会导致菜单项从右往左依次排列，自然顺序颠倒。解决方案是将浮动逻辑调整为让整个<ul>容器右对齐，同时让<li>保持默认的横向排列顺序。

问题2：菜单与Logo未对齐 #

通过给.navbar启用Flex布局，利用align-items: center实现Logo和菜单的垂直居中对齐，同时优化整体布局结构，避免浏览器默认样式干扰。

修改后的样式代码 #

<style scoped>
.navbar {
  background-color: white;
  border-radius: 30px;
  display: flex; /* 启用Flex布局 */
  align-items: center; /* 垂直居中对齐子元素 */
  justify-content: space-between; /* Logo居左，菜单居右 */
  padding: 10px 20px; /* 添加上下内边距，优化视觉间距 */
}

.navbar li {
  list-style: none;
  margin: 0 20px;
  font-size: 24px;
  display: inline-block; /* 让li横向排列 */
}

.navbar ul {
  margin: 0; /* 清除ul默认外边距 */
  padding: 0; /* 清除ul默认内边距 */
}

.navbar li a {
  padding: 3px 3px;
  text-decoration: none;
  color: black;
}
</style>

补充说明 #

• Flex布局是现代前端布局的首选方案，相比浮动更易维护，兼容性覆盖绝大多数现代浏览器。
• justify-content: space-between会自动将Logo和菜单分别推到容器的左右两端，无需手动设置浮动。
• 清除ul的默认边距和内边距，避免浏览器默认样式导致的布局偏移。

内容的提问来源于stack exchange，提问作者OLA