javascript - 页脚未放大/扩展
问题描述
我创建了一个网站,我想扩展我的页脚,因为现在它看起来像这样:
它应该覆盖整个网站,我尝试增加宽度,但这不起作用。
这是页脚的 HTML/CSS:
#footer {
background: #f7f8f9;
color: #45505b;
font-size: 14px;
text-align: center;
padding: 30px 0;
}
#footer h3 {
font-size: 36px;
font-weight: 700;
position: relative;
font-family: "Poppins", sans-serif;
padding: 0;
margin: 0 0 15px 0;
}
#footer p {
font-size: 15;
font-style: italic;
padding: 0;
margin: 0 0 40px 0;
}
#footer .social-links {
margin: 0 0 40px 0;
}
#footer .social-links a {
font-size: 18px;
display: inline-block;
background: #0563bb;
color: #fff;
line-height: 1;
padding: 8px 0;
margin-right: 4px;
border-radius: 50%;
text-align: center;
width: 36px;
height: 36px;
transition: 0.3s;
}
#footer .social-links a:hover {
background: #0678e3;
color: #fff;
text-decoration: none;
}
#footer .copyright {
margin: 0 0 5px 0;
}
#footer .credits {
font-size: 13px;
}
<footer id="footer">
<div class="container">
<h3>My name</h3>
<p></p>
<div class="social-links">
<a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/kaustubh-prabhakar/" class="linkedin"><i class="bx bxl-linkedin"></i></a>
<a target="_blank" rel="noopener noreferrer" href=href="https://github.com/SantaKaus" class="github"><i class="bx bxl-github"></i></a>
<a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/santa_kaus/" class="instagram"><i class="bx bxl-instagram"></i></a>
</div>
<div class="copyright">
© <strong><span>my name</span></strong> 2021
</div>
</div>
</footer><!-- End Footer -->
我从另一个来源获得了整个页脚代码,我尝试复制和粘贴代码,但由于某种原因,我无法让它扩展更多 idk 为什么。你们能帮忙吗?
当您运行上面的代码时,它输出正常,但在我这边,我得到了上面发送的图片中的输出。
出现问题是因为我可能会用它覆盖其他 CSS 元素吗?我有多个 CSS 文件,我尝试更改页脚 CSS 类的名称,但它仍然不起作用。
解决方案
https://repl.it/@HussainOmer/SantaKausgithubio-3#index.html
您在上一个问题中分享了您的代码。您有具有显示网格属性的主体。
- 首先,似乎您根本不使用网格,您可以删除此属性。
- 您也可以设置
place-items
为stretch
达到相同的效果。 - 似乎只是将页脚的宽度设置为 100% 也可以正常工作
推荐阅读
- opencv - Pytesseract 未检测到图像中的数字
- laravel - Livewire - 我应该使用 mount 方法还是 render 方法从数据库中获取数据?
- html - CS50 金融。历史记录 - 为数据库中未显示在 html 页面中的交易购买或出售类型添加的列
- powerbi - 利润 < 零的前 10 名成本
- c# - 如何使用 net5 OpenAPI 支持指定基本接口
- azure - 寻找天蓝色物联网连接工厂演示
- r - 从零开始的ggplot传奇
- javascript - 找不到命名空间“去”
- keras - TypeError: texts_to_matrix() 得到了一个意外的关键字参数“num_words”
- azure - 用于 E2E 流解决方案的 Azure devops 实施