Question

目标：对齐 Ko-Fi 按钮小部件，使其不会掩盖隐私政策链接，而是整齐地放在它旁边。如果我可以这样做，那么我可以为我将来添加的页脚栏中的所有其他按钮/链接执行此操作。

我尝试过的：

将 Ko-Fi 代码放在自己的 div 中。
在容器 div 中使用 Ko-Fi 代码嵌套一个 div
将 Ko-Fi 代码放入容器 div 中。

我目前拥有的/我的代码：

<footer class="border-top footer text-muted">
        <div class="container">
            &copy; 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">
            &copy; 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 */
}

Answer 1

我在 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">&copy; 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">

这就是我得到的：

问题已解决。

无法正确排列 Div 元素

1 个答案: