如何将图片放入页脚标签中？ [复制]

Posted 2023-03-21

【中文标题】如何将图片放入页脚标签中？ [复制]

【英文标题】：How do I put my image inside my footer tag? [duplicate]

【发布时间】：2017-01-08 01:48:11

【问题描述】：

我对 html 和 css 有一个非常基本的问题。我创建了一个带有<p> 标签和<li> 标签的页脚。在<li> 标签内我有一张图片，但是这张图片超出了页脚。 如何让图片进入页脚标签内？

HTML

<footer class="footer">
<p class="footerP">© Axel Halldin 2016 ©</p>
<li class="socialMedias"> <img class="facebook" src="facebook.jpg" href="https://www.facebook.com/axel.halldin1?fref=ts"/>
</li>
</footer>

CSS

.footer
background-color:#003366;
margin:0;
padding:0;
width:90vw;
height:22.5vh;
float:right;


.footerP
color:white;
font-family:FiraSans-Regular, sans-serif;
font-size:16px;
margin:0;
line-height:22.5vh;


.socialMedias
float:right;


.facebook
width:5vw;
height:10vh;

【问题讨论】：

图片在footer标签内，因为li在页脚标签内

您的 HTML 无效。解决这个问题通常是很好的第一步。 validator.w3.org/nu

什么是没有有序/无序列表的列表项标签？

试试这个jsfiddle.net/cwy3kauw

欢迎您，但您仍然需要学习很多东西...先从基础开始。

【参考方案1】：

在.css中添加overflow:auto;如下：

.footer
background-color:#003366;
margin:0;
padding:0;
width:90vw;
height:22.5vh;
float:right;
overflow:auto;