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

标签 html css image icons

想象一下社交媒体图标/图像(例如 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/

相关文章:

php - 使用 GD ( imagettftext() ) 和 UTF-8 字符

c# - 如何在 c# 中的另一个程序之上制作非交互式图形叠加?

python - 使用 Python Base64 压缩 GAE Blob 图像?

javascript - 我如何让我的结果连续显示?

javascript - 如何仅更改 1 行而非全部的切换值

html - 为什么当我把 float :right on <div> it goes down?

CSS3 透视 : Visualising the view pyramid

javascript - 宽度比计算被应用了两次

css - 在 Jekyll 中使用 SCSS 进行 Will-change

javascript - 存储绘图的 Canvas 坐标