html - 如何使用 html+css 设置带有 float 段落的页脚-6ren

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

转载作者：太空宇宙更新时间：2023-11-04 09:14:59

我正在尝试使用 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>

提前致谢!

最佳答案

从您的代码中删除反斜杠，它工作正常。我还为您的页脚添加了宽度 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>