如何调整页脚Div元素对齐 使Ko-Fi按钮不遮挡隐私政策链接

• 你当前用到的floating-chat类型Ko-Fi组件默认是全局固定定位，天生会脱离文档流悬浮在页面上层，不可能和页脚内的文本、链接排成一行，第一步需要更换为Ko-Fi的静态内联按钮。
• 测试时<p>标签换行是因为p属于块级元素，默认独占一行。我们可以给页脚的container新增flex布局，让内部所有元素默认横向排列、垂直居中，后续新增的按钮/链接都可以直接放入自动适配排列。

修改后的CSS代码 #

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px; /* Vertically center the text there */
}
/* 新增以下样式即可 */
.footer .container {
  display: flex;
  align-items: center;
  gap: 16px; /* 元素之间的间距可根据需求自行调整 */
}
.kofi-button {
  height: 36px;
  border: none;
}

修改后的HTML代码 #

<footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2020 - APixelADay - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
            <!-- 替换原来的浮动组件代码为静态内联按钮 -->
            <a href='https://ko-fi.com/knightshade07' target='_blank'>
              <img src='https://storage.ko-fi.com/cdn/kofi2.png?v=3' alt='Support me on Ko-fi' class="kofi-button"/>
            </a>
        </div>   
    </footer>

如果需要保留Ko-Fi的交互按钮样式而非图片按钮，可使用Ko-Fi的非浮动组件版本，删除type: 'floating-chat'配置，指定渲染到container内的自定义容器中，同样可以适配flex布局实现横向排列。

内容的提问来源于stack exchange，提问作者KnightShade