如何让我的网页图标保持正确？ [复制]答案

【问题标题】：How can I make my webpage icon stay right? [duplicate]如何让我的网页图标保持正确？ [复制]
【发布时间】：2021-12-22 07:22:08
【问题描述】：

我制作了一个导航栏，当网页宽度低于 630 像素时，它应该用右侧的菜单图标替换链接。问题是，我的图标没有保持在右边，它尽可能地保持在左边，为隐藏链接的边距留出了空间（元素本身已经消失 - 我将它们设置为 display: none; - 但边距是还在那儿）。我正在使用w3 schools article 处理响应式导航栏，但仅将其用于出现的图标部分。

我尝试将图标的显示更改为 flex，以及各种对齐和对齐方式，但没有任何效果。当它设置为 flex 时，它的宽度变为 0，我不能让它再次变宽。

我试图只提供相关代码，但有相当多的东西我没有包括在内，所以请随时向我询问更多或指定一些内容。

.navContainer {
  position: sticky;
  top: 0;
  margin: 0;
  background-color: #ffffff;
  display: flex;
  justify-content: left;
  align-content: flex-start;
  padding-left: 10px;
  padding-top: 20px;
  padding-bottom: 10px;
}

.navContainer li {
  list-style: none;
  margin-right: 40px;
}

.navContainer a {
  text-decoration: none;
  color: black;
  font-family: Montserrat-Regular;
  font-size: 20pt;
  margin: 10px;
}

.navContainer .icon {
  display: none;
  margin: 0;
}

.navContainer .iconImg {
  max-height: 40px;
  max-width: 40px;
}

@media (max-width: 630px) {
  .navContainer a:not(.logoContainer, .name) {
    display: none;
  }
  .navContainer li.icon {
    float: right;
    display: block;
  }
}

<ul class="navContainer">
  <li class="logoContainer"><img href="TriTech-Home.html" class="logo" src="https://via.placeholder.com/80"></img>
  </li>
  <li><a href="TriTech-Home.html" class="name">TriTech</a></li>
  <li><a class="link1" href="#">xDesk</a></li>
  <li><a class="link2" href="#">Saturn Bikes</a></li>
  <li href="javascript:void(0);" class="icon" onclick="myFunction()">
    <img class="iconImg" src="Menu-Bars.ico">
  </li>
</ul>

【问题讨论】：

图像元素没有 href 属性。也不列出项目。

标签： html css

【解决方案1】：

不要漂浮东西。这是一种过时的方法，尤其是使用 flexbox。在最后一项上使用自动左边距。

.navContainer {
  position: sticky;
  top: 0;
  margin: 0;
  background-color: #ffffff;
  display: flex;
  justify-content: left;
  align-content: flex-start;
  padding-left: 10px;
  padding-top: 20px;
  padding-bottom: 10px;
}

.navContainer li {
  list-style: none;
  margin-right: 40px;
}

.navContainer a {
  text-decoration: none;
  color: black;
  font-family: Montserrat-Regular;
  font-size: 20pt;
  margin: 10px;
}

.navContainer .icon {
  display: none;
  margin: 0;
}

.navContainer .iconImg {
  max-height: 40px;
  max-width: 40px;
}

@media (max-width: 2630px) { /* increased for demo */
  .navContainer a:not(.logoContainer, .name) {
    display: none;
  }
  .navContainer li.icon {
    display: inline-block;
    margin-left: auto; /* <-------------------- HERE */
  }
}

<ul class="navContainer">
  <li class="logoContainer"><img href="TriTech-Home.html" class="logo" src="https://via.placeholder.com/80" />
  </li>
  <li><a href="TriTech-Home.html" class="name">TriTech</a></li>
  <li><a class="link1" href="#">xDesk</a></li>
  <li><a class="link2" href="#">Saturn Bikes</a></li>
  <li href="javascript:void(0);" class="icon" onclick="myFunction()">
    <img class="iconImg" src="https://via.placeholder.com/40">
  </li>
</ul>

【讨论】：

【解决方案2】：

您可以简单地将绝对定位与顶部和右侧规则一起用于名为 icon 的类或名为 .iconImg 的 img 类这可以以任何您想要的方式进行自定义，您可以为其指定规则以适合您所在的网页想要。

.icon {
   position: absolute;
   top: 0;
   right: 0;
}

/* OR */

.iconImg {
   position: absolute;
   top: 0;
   right: 0;
}

【讨论】：

【解决方案3】：

这应该可以工作

.nav-container .icon{
    width: 100%;
    text-align: end;
    }

【讨论】：