0

我有一个元素应该与其内容div的形状和大小完全相同。icon我正在 Angular 9 中设计一个组件，它是一个可以将您导航到上一页的按钮。我希望这个组件是可重用的，所以它里面的图标元素必须是可变的。我通过 Angular 的内容投影轻松实现了这一点，但问题是 div 外部容器实际上大于其内容，导致图标区域被真正的“可点击”区域溢出。

这是html页面

<div class="back-button-container clickable" (click)="navigateBack()">
    <ng-content select="[icon]"></ng-content>
</div>

没有内容投影，html 页面看起来像这样（我认为我的问题超出了 Angular 内容投影）

<div class="back-button-container clickable" (click)="navigateBack()">
    <i icon class="far fa-2x fa-arrow-alt-circle-left" ></i>
</div>

display: inline-block，正如这里所建议的那样，不起作用。

4

1 回答 1

1

至于 css - 测试如何修复它

div{
height: auto;           /* it is by default - if wasn't changed not needed */ 
width: auto;            /* it is by default - if wasn't changed not needed */
padding: 0;             /* a space around the interior of the element*/
display: inline-block;  /* by default is block - takes up the full width */
}
i{
display: block;     /* takes up the full width of parent */
margin: 0;          /* you know what it is */
border: 0;          /* if you need border - set it, but don't let the user agent do it */
width: 120px;       /* not 120 but explicit how many px */
height: 120px       /* not 120 but explicit how many px */
}

最后使用Validator w3c

更新
我假设图标表示图像，最佳做法是设置固定大小，因为浏览器不需要猜测并且加载时不会跳转。
如果它的大小发生变化

i{
height: 100%;   /* or 10vh as 10% of devices screen */
width: auto;    /* if the image isn't square it won't be deformed */
}

如果由于任何原因大小不可预测 - 让它跳跃:)

还有一件事——如果有任何浮动或弹性，那么，它可能并不那么容易。

于 2020-08-17T15:42:47.170 回答