Html 沿导航栏右对齐包含图像和文本的链接项

我想创建一个右对齐的导航栏。每个链接项应包含一个图像和一个文本。只有文本时，此代码可以正常工作

#导航栏{
高度：60px；
显示：网格；
论证内容：结束；
填充：20px；
背景：红色；
对齐项目：居中；
}
a{
文字装饰：无；
利润率：0.10px；
颜色：白色；
背景：黑色；
}

---

使用

柔性包装：包装

#navbar {
  /* height: 60px; */
  display: flex;
  justify-content: flex-end;
  padding: 20px;
  flex-wrap:wrap;
  align-items: center;
  background: red;
  /*  margin: 0 60px; */
}

使用
柔性包装：包装

#navbar {
  /* height: 60px; */
  display: flex;
  justify-content: flex-end;
  padding: 20px;
  flex-wrap:wrap;
  align-items: center;
  background: red;
  /*  margin: 0 60px; */
}

如果您不想将flexbox与网格一起使用，您可以针对
#navbarLinkContainer
并使用列进行操作


#导航栏{
显示：网格；
证明项目：结束；
填充：20px；
对齐项目：居中；
背景：红色；
}
#navbarLinkContainer{
显示：网格；
网格模板列：重复（3，1fr）；
}
.navbarItemContainer{
文本对齐：居中；
文字装饰：无；
利润率：0.10px；
}
.Navbaritemg{
宽度：64px；
高度：64px；
}
如果您不想将flexbox与网格一起使用，您可以针对
#navbarLinkContainer
并使用列进行操作


#导航栏{
显示：网格；
证明项目：结束；
填充：20px；
对齐项目：居中；
背景：红色；
}
#navbarLinkContainer{
显示：网格；
网格模板列：重复（3，1fr）；
}
.navbarItemContainer{
文本对齐：居中；
文字装饰：无；
利润率：0.10px；
}
.Navbaritemg{
宽度：64px；
高度：64px；
}

“可能有更好的解决方案使用网格属性”-这是flexbox区域：）“可能有更好的解决方案使用网格属性”-这是flexbox区域：）感谢您的回复。您的示例有效，但项目会被推到下方屏幕的右侧：（似乎另一种解决方案更适合……是的，我通常在这种情况下使用flex，但因为您提到了网格，所以我想给您一个想法，以便您希望它们在较小屏幕上居中？不，但我希望它们保持在屏幕上。如果您降低屏幕大小，它们会被推到右侧（屏幕外）感谢您的回复。您的示例有效，但项目会被推到下方屏幕的右侧：（似乎另一种解决方案更适合……是的，我通常在这种情况下使用flex，但因为您提到了网格，所以我想给您一个想法，以便您希望它们在较小屏幕上居中？不，但我希望它们保持在屏幕上。如果您降低屏幕大小，它们会被推到右侧（屏幕外）