div 或任何其他父元素内的 img 应答器的宽度

Question

我需要社区的帮助。

我在 header 父元素中有 3 个元素，如下所示：

<header class="flex flex-jc-sb flex-ai-c">
  <div>
    <img src="Assets/images/logo_white.png">
  </div>
  <ul>
    <li>
      <a href=""></a>Roadmap</li>
    <li>
      <a href=""></a>Artist</li>
    <li><a href=""><i class="fab fa-instagram"></i></a></li>
    <li><a href=""><i class="fab fa-twitter"></i></a></li>
  </ul>
  <button>
            <a href="">Lorem </a>
        </button>
</header>

我添加了一个 display flex 来对齐三个元素，然后是一个空格。 我的问题是 div 元素内的 IMG 比其他元素占用更多宽度，但没有 div，一切正常。

这是我拥有的唯一 css：

.flex {
  padding: 1.25rem 3.125rem 1.25rem 3.125rem;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  font-family: 'Outfit';
  display: flex;
  &-jc-sb {
    justify-content: space-between;
  }
  &-ai-c {
    align-items: center;
  }
  img {
    width: 5%;
    float: left;
    display: inline;
  }
  ul {
    li {
      display: inline;
      color: white;
      i {
        color: white;
      }
    }
  }

在 div 中使用 Img 应答器

单独使用 Img 应答器

我希望我足够清楚。

谢谢你们的帮助。

Answer 1

这是一个使用纯 CSS 的版本。 不应将图像嵌套在 div 中，而应将ul和a嵌套在 div 中。 然后，您可以在其中设置带有gap的 display flex 。 然后我会弯曲父header并使用space-between 。

编辑~ 永远不应该使用带有button的a标签。 我建议使用a链接和buttons进行操作。 您可以在 a 标签上使用role="button" 。

 .flex { display: flex; justify-content: space-between; } ul { list-style-type: none; display: flex; gap: 2px; } header>img~div { display: flex; align-items: center; } a.btn { background-color: #e1e1e1; padding: 3px; outline: solid 1px; color: black; text-decoration: none; border-radius: 2px; }

 <header class="flex flex-jc-sb flex-ai-c"> <img src="Assets/images/logo_white.png"> <div> <ul> <li> <a href=""></a>Roadmap</li> <li> <a href=""></a>Artist</li> <li><a href=""><i class="fab fa-instagram"></i></a></li> <li><a href=""><i class="fab fa-twitter"></i></a></li> </ul> <a href="#" class="btn" role="button">Lorem</a> </div> </header>