想象一下社交媒体图标/图像(例如 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;
最佳答案
我认为你应该把每个内容:文本,图标放在不同的地方,并根据需要将它们放在一行中,宽度和高度
关于html - 自动调整同一行上的图像和/或图标的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31174715/