时间戳

首页 > 解决方案 > 如何确保显示的子元素：inline-flex 元素不会将其宽度扩展到 100%

css - 如何确保显示的子元素：inline-flex 元素不会将其宽度扩展到 100%

问题描述

我正在 Google 新闻上制作一个注入脚本，我想在它的文章中添加一个跨度，将宽度扩展到父元素的 100%：

article {
  display: inline-flex;
  flex-direction: column;
}
<article>
  <h3>
    <a href="./articles/CAIiEIt3t6r5_e3YaJax0AEI2jwqGQgEKhAIACoHCAow2Nb3CjDivdcCMJ-thQY?hl=en-US&amp;gl=US&amp;ceid=US%3Aen">New Yorkers ordered to mostly stay inside to fight coronavirus: 'We're all under quarantine now,'
      Gov. Cuomo says</a>
  </h3>
  <span style="cursor: copy; border: 1px solid black; padding: 0px 10px; font-size: 14px;">share</span>
</article>

上面的代码不起作用。唯一的方法是设置固定宽度或将跨度放入 div 中，其中任何一个都是不可取的。

规则：您永远不能将article' 的显示更改inline-flex为其他内容。你只能改变article > span's 的风格。

标签： css

解决方案

使用align-self在span

span {
align-self:flex-start;
}


article {
  display: inline-flex;
  flex-direction: column;
}

span {
  align-self: flex-start;
}
<article>
  <h3>
    <a href="./articles/CAIiEIt3t6r5_e3YaJax0AEI2jwqGQgEKhAIACoHCAow2Nb3CjDivdcCMJ-thQY?hl=en-US&amp;gl=US&amp;ceid=US%3Aen">New Yorkers ordered to mostly stay inside to fight coronavirus: 'We're all under quarantine now,'
      Gov. Cuomo says</a>
  </h3>
  <span style="cursor: copy; border: 1px solid black; padding: 0px 10px; font-size: 14px;">share</span>
</article>

推荐阅读