如何解决无法正确排列 Div 元素
目标:对齐 Ko-Fi 按钮小部件,使其不会掩盖隐私政策链接,而是整齐地放在它旁边。如果我可以这样做,那么我可以为我将来添加的页脚栏中的所有其他按钮/链接执行此操作。
我尝试过的:
我目前拥有的/我的代码:
<footer class="border-top footer text-muted">
<div class="container">
© 2020 - APixelADay - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
<script src='https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'></script>
<script>
kofiWidgetoverlay.draw('knightshade07',{
'type': 'floating-chat','floating-chat.donateButton.text': 'Support me','floating-chat.donateButton.background-color': '#00b9fe','floating-chat.donateButton.text-color': '#fff'
});
</script>
</div>
</footer>
它在网页上的视觉效果:
更新:在 Dale landry 提出建议后,我确实尝试使用 CSS 移动元素,但没有奏效。现在,我只是想弄清楚如何让元素水平显示而不是垂直显示。
我现在拥有的:
<footer class="border-top footer text-muted">
<div class="container">
© 2020 - APixelADay - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
<p>Test</p>
</div>
</footer>
它的视觉效果:
我在 CSS 文件夹中的页脚 CSS(CSS 是由 Visual Studio 自己制作的,不是我制作的):
.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: Nowrap;
line-height: 60px; /* Vertically center the text there */
}
解决方法
我在 Ko-Fi 网站上进行了一些挖掘,发现了以下内容: https://help.ko-fi.com/hc/en-us/articles/360018381678-Ko-fi-Donation-Widget
不幸的是,您目前似乎无法执行此操作,但如果情况发生变化,那么我可以参考此问题寻求帮助。但是,如果我对此有误,请告诉我!
更新:所以,在 Bootstrap 中,有一些叫做列表组的小东西。我从列表组文档 (https://getbootstrap.com/docs/4.0/components/list-group/) 中向我的项目添加了一个:
<footer class="border-top footer text-muted">
<div class="container">
<ul class="list-group list-group-horizontal">
<li class="list-group-item">
<script type='text/javascript' src='https://storage.ko-fi.com/cdn/widget/Widget_2.js'></script>
<script type='text/javascript'>kofiwidget2.init('Support Me on Ko-fi','#29abe0','A0A1571WM'); kofiwidget2.draw();</script> </li>
<li class="list-group-item">© 2020 - APixelADay - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a></li>
<li class="list-group-item">Morbi leo risus</li>
</ul>
</div>
</footer>
使用 ul 类
<ul class="list-group list-group-horizontal">
问题已解决。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。