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

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

图标{边距: 0 auto ；文本对齐:居中；

.image {宽度:150px；背景色:白色；填充:2px；

.padding {显示:内联；向右填充:6px；

Answer 1

我认为你应该把每个内容:文本，图标放在不同的地方，并根据需要将它们放在一行中，宽度和高度