自动调整同一行上的图像和/或图标大小

Question

想象一下，社交媒体图标/图像（例如Facebook，Twitter，LinkedIn）在同一条线上彼此相邻排列。当我向该行添加其他图标/图像时，如何自动调整图标/图像的大小？现在他们只是跳到下一行。我想要它到哪里，如果我添加图标/图像，它们会变小，以便保持在同一条线上;如果我拿走图标/图像，它们会变大以适应容器的宽度。

感谢您的帮助！

更新

            <div class="padding"><a href="http://www.facebook.com"><img class="image" src="images/black_white_facebook.png" alt="Facebook Icon" /></a></div>
            <div class="padding"><a href="http://www.twitter.com"><img class="image" src="images/black_white_twitter.png" alt="Twitter Icon" /></a></div>
            <div class="padding"><a href="http://www.linkedin.com"><img class="image" src="images/black_white_linkedin.png" alt="Linked In Icon" /></a></div>
            <div class="padding"><a href="http://www.wordpress.com"><img class="image" src="images/black_white_wordpress.png" alt="WordPress Icon" /></a></div>
            <div class="padding"><a href="http://www.youtube.com"><img class="image" src="images/black_white_youtube.png" alt="YouTube Icon" /></a></div>
            <div class="padding"><a href="http://www.plus.google.com"><img class="image" src="images/black_white_google_plus.png" alt="Google+ Icon" /></a></div>

        </div><!-- end of icons div -->

图标{margin：0 auto; text-align：center;}

.image {width：150px;背景颜色：白色;填充：2px;}

.padding {display：inline; padding-right：6px;}

Answer 1

我认为您应该将每个内容：文本，图标放在不同的位置，并将这些内容放在宽度和高度符合您想要的行中