无法正确排列 div 元素答案

【问题标题】：Trouble Getting Div Elements Lined Up Correctly无法正确排列 div 元素
【发布时间】：2021-07-06 00:16:25
【问题描述】：

目标：对齐 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 */
}

【问题讨论】：

您是否尝试在该页脚上放置任何 CSS？也许是带有 justify-content 的 flex 显示，以查看它是否对 a 标签有任何影响。也许像.footer{ display: flex; justify-content: space-between; } .footer a { padding-right: 2rem; } 之类的东西？
试过你的建议，没用。
你知道如何在你的开发工具中使用检查器吗？打开开发工具，看看您是否可以在元素上放置任何类型的 CSS 以任何方式对其进行操作，值得一试...只需查找您正在使用的任何浏览器；像 firefox 如何使用开发工具

标签： html css button bootstrap-4 widget

【解决方案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">

这就是我得到的：

问题解决了。

【讨论】：