如何使用 html+css 设置带有浮动段落的页脚

Question

我正在尝试使用 CSS 编写页脚，我需要页面左下角的消息和右下角的页码。这是我当前的代码。这两段没有正确显示：

<html>
<head>
<style>
  .footer {
    bottom: 0px;
    position: fixed;
    display: inline-block;
  }
  .left {
    float: left;
  }
  .right{
    float: right;
  }
</style>
</head>
<body>
  <div class="footer">
    <p class="left">this is a footer</p>
    <p class="right">Page: 1/12</p>
  </div>
</body>
</html>

提前致谢！

Answer 1

从您的代码中删除反斜杠，它工作正常。我还为您的页脚添加了宽度 width: 100%;

<html>
<head>
<style>
.footer {
    bottom: 0px;
    position: fixed;
    display: inline-block;
    width: 100%;
}
.left {
    float: left;
}
.right{
    float: right;
}
</style>
</head>
<body>
    <div class="footer">
        <p class="left">this is a footer</p>
        <p class="right">Pag: 1/12</p>
    </div>
</body>
</html>

Answer 2

我在这里放了另一个使用 flex 的解决方案：

.footer {
    width: 100%;
    display: flex;
    justify-content: space-between;
    bottom:0px;
    position:fixed;
}

.left {
    width: 15%;
}

.right {
    width:15%;
}

<div class="footer">
<p class="left">this is a footer</p>
<p class="right">Pag: 1/12</p>
</div>

如何使用 html+css 设置带有浮动段落的页脚

How to setup a footer with floating paragraphs using html+css

html

css

footer