html - 我如何强制缩小的 svg 图像彼此相邻排列而不是换行/被推到下一行？

Question

我有 6 张 svg 图片，我想连续显示，如下所示:

logo_1 logo_2 logo_3 logo_4 logo_5 logo_6

它们的宽度不同，但高度相同，所以我使用 height 属性以相同的比例缩放它们。这可以缩放 svg，但由于某种原因，img 容器仍然是布局网格的整个宽度，导致每个图像都被推到下一行，如下所示:

[................................标志_1 .................. ...............]

[......................标志_2 .................. ...............]

[................................标志_3 .................. ...............]

[......................logo_4 .................. ...............]

[............................标志_5 .................. ...............]

[............................标志_6 .................. ...............]

这是执行此操作的代码:

        <div class="gridContainer clearfix">
         <div class="sponsorLogo">
         <img src=_assets/images/logo_1.svg/>
         <img src=_assets/images/logo_2.svg/>
         <img src=_assets/images/logo_3.svg/>
         <img src=_assets/images/logo_4.svg/>
         <img src=_assets/images/logo_5.svg/>
         <img src=_assets/images/logo_6.svg/>
         </div>
       </div>

.sponsorLogo img {
text-align: center;
height: 3em;
}

当我使用 width 属性时，我可以让它们排成一行，但这会导致图像具有不均匀的高度，有点像这样:

logo_1 LOGO_2 LoGo_3 lOgO_4 LOgo_5 loGO_6(你懂的。呵呵)

提前感谢您的建议!

Answer 1

尝试:

.sponsorLogo img {
  text-align: center;
  height: 3em;
  display:inline-block;
}