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

【问题标题】：Width in a img balise inside a div or any other parent elementdiv 或任何其他父元素内的 img 应答器的宽度
【发布时间】：2022-01-21 08:44:38
【问题描述】：

我需要社区的帮助。

我在标题父元素中有 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 应答器

我希望我已经足够清楚了。

谢谢你们的帮助。

【问题讨论】：

永远不要在其他动作元素中使用动作元素 BUTTON>A 或 A>BUTTON 是无效标记。
你可以尝试添加max-width
@RokoC.Buljan 在我第一次遇到这个语义问题时并没有看到。已编辑。
谢谢@RokoC.Buljan，但是你怎么能为按钮添加一个href？
又怎么能有靠近图片的标题呢？我的意思是由于 flexbox，标题与图像的宽度相距甚远。

标签： html css sass flexbox display

【解决方案1】：

这是一个使用纯 CSS 的版本。不应将图像嵌套在 div 中，而应将 ul 和 a 嵌套在 div 中。然后您可以在其中使用gap 设置显示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>

【讨论】：