Imagine a row of social media icons/images (like Facebook, Twitter, LinkedIn) displayed together. How can I ensure that when I add more icons/images to this row, their sizes adjust automatically to stay on the same line instead of moving to the next one? I want them to decrease in size if new ones are added and increase if some are removed so they fit within the container's width.
Thank you in advance for your assistance!
Update:
<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 -->
icons {margin: 0 auto; text-align: center;}
.image {width: 150px; background-color: white; padding: 2px;}
.padding {display: inline; padding-right: 6px;}