私はCSSを使ってフッターを書きたいのですが、ページの左下にメッセージが、右下にページ番号が必要です。 これが私の現在のコードです。 2つの段落が正しく表示されません。
<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>
前もって感謝します！
回答：
回答№1は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>
回答№2の場合は0
私はここに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>