如何强制按比例缩小的svg图像排列在一起，而不是包装/被推到下一行？

I have 6 svg images that I would like to appear in a row, like this:

我有6个svg图像,我想连续出现,像这样:

logo_1 logo_2 logo_3 logo_4 logo_5 logo_6

logo_1 logo_2 logo_3 logo_4 logo_5 logo_6

They are of varying widths, but are all the same height, so I used the height property to scale them at the same ratio. That works to scale the svg, but for some reason the img container is still the full width of the layout grid, resulting in each image getting pushed to the next line, like this:

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

[..............................logo_1............................]

[..............................logo_2............................]

[..............................logo_3............................]

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

[..............................logo_5............................]

[..............................logo_6............................]

Here's the code that does that:

这是执行此操作的代码:

        <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;
}

I can get them to line up in a row when I use the width property, but that causes the images to have non-uniform heights, kind of like this:

当我使用width属性时,我可以将它们排成一行,但这会导致图像具有不均匀的高度,如下所示:

logo_1 LOGO_2 LoGo_3 lOgO_4 LOgo_5 loGO_6 (you get the idea. hehe)

logo_1 LOGO_2 LOGO_3 lOgO_4 LOgo_5 loGO_6(你明白了。呵呵)

Thanks in advance for your suggestions!

提前感谢您的建议!

1 个解决方案

#1

Try:

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