<ul>と<p>形式を同行に配置し、それぞれを左右に寄せる方法がわかりません。

Question

<ul>と<p>形式を同行に配置し、それぞれを左右に寄せる方法がわかりません。

HTMLとCSSを使ってサイトを作成しています。
サイトのフッター部最下に配置するAbout, Privacy Policy, Contactを<ul><li>で横並びにし左側に寄せ、Copyrightを<p>で表記し、右側に同じ高さで表示させたいです。 ですがCopyrightにtext-align:rightを指定すると右寄せにはなるんですが、改行されてしまいます。下の画像の"理想の配置"のように改行されていない配置にしたいです。初心者なので色々初歩的な間違いや勘違い等あるかと思いますが、ご指摘いただけるとありがたいです。

該当のソースコード

[HTML]
<div class="bottom">
 <ul>
     <li><a href="#リンク">About</a></li>
     <li><a href="#リンク">Privacy Policy</a></li>
     <li><a href="#リンク">Contact</a></li>
     </ul>　
    <p>OOO's ALL RIGHTS RESERVED</p>
</div>

[CSS]
.bottom ul {
	list-style: none;
    text-align: left;
}

.bottom ul li {
	display: inline;

.bottom ul li a {
	text-decoration-line: none;
	color: #333333;
}

.bottom p {
    text-align: right;
}

試したこと

float: leftをしてみましたが、それでも改行されてしまいます。

Answer 1

こんな感じかな

.bottom ul {
  list-style: none;
  float: left
}

.bottom ul li {
  display: inline;
}

.bottom ul li a {
  text-decoration-line: none;
  color: #333333;
}

.bottom p {
  float: right
}

サンプル

Comments

[takumiisobe_]

丁寧にありがとうございます！

Answer 2

.bottom{
    display: flex;
    justify-content: space-between;
}

これでできませんか？
flexで<ul>と<p>を横並びにしてjustify-content: space-between;で両端に配置っていう指定です

あとそのコピーライトの書き方が少し間違えているような気がするので一回調べてみるとよいかと！
All rights reservedは不要なはずです
タグはｐよりsmallがよいと思います！

Comments

[takumiisobe_]

できました！そんな方法があったのですね！
分かりました！調べてみます。丁寧にありがとうございます。

[pikurusudakedo]

僕も初心者ですがお互い頑張りましょう！