headerのnavメニューを縮小した時に、縦書き表記になってしまう

Question

前提・実現したいこと

ヘッダーのnavで記載した文字が縮小すると縦書きになってしまいます。縮小に合わせてそのままの横書きで表記させたいです。
初心者なため、拙い質問文ではありますがご回答いただければ幸いです。

発生している問題・エラーメッセージ

headerのメニューが縮小すると縦書きになってしまう

該当のソースコード

＊HTMLコード

<header> <div class="header-title"> <h1>30DAYSトライアル</h1> </div> <div class="header-menu"> <nav> <ul> <a href="#"><li>ディトラとは</li></a> <a href="#"><li>コース一覧</li></a> <a href="#"><li>お問い合わせ</li></a> </ul> </nav> </div> </header>

---

＊CSSコード
header {
width:75%;
display: flex;
justify-content: space-between;
margin: 0 auto;
text-align: center;
}

.header-title {
font-size: 24px;
}

.header-menu nav ul {
display: flex;
justify-content: space-between;
text-align: center;
}

.header-menu nav ul li {
display: flex;
justify-content: space-between;
list-style: none;
margin-right: 40px;
}

.header-menu nav ul li a {
color: #333;
text-decoration: none;
outline: none;
display: inline-block;
margin-top: 0;
}

試したこと

調べたところ、多くの方が親要素に対してposition:relative;
子要素に対してposition:absolute;のクラスを与えると解決できると記載されていましたが
実際に試すと最初から、縦書き表記になってしまいます。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

他の方の回答にもあるように現状のままでは、要素の幅があるので、どうしても折り返されますね。

レイアウトを再検討するためのヒントをいくつかあげておきます。

• 番号リストheaderの幅を75%とせずに、max-width で最大幅を決めるようにするといいでしょう。

狭くしたときに余分な余白をなくせますので、ギリギリまで狭くできます。

設定幅

header {
  width:100%;
  max-width: 1000px; /* お好みで調整 */
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  text-align: center;
}

• ナビメニュー(header-menu)の幅の最小値を min-width で決める。最小幅は、テキスト幅の合計＋余白で決めます。

設定例

.header-menu {
  min-width: 420px; 
}

• ブラウザの既定の余白は消しておく。例えば、ul にはpadding-leftが既定で設定されているので 0 しておく。 あるいは、リセットCSSの導入を検討する。

設定例

.header-menu nav ul {
  display: flex;
  justify-content: space-around;
  text-align: center;
  padding-left: 0; /* ブラウザの既定の余白をリセット */
}

• margin-right: 40px;などというような固定値の余白はつけない。flex を使うなら、justify-content や gap で余白を調節する。

設定例

.header-menu nav ul li { 
  display: flex;
  justify-content: space-between;
  list-style: none;
}

上記のような設定である程度の幅までは、折り返されずにすみます。
ただ、各要素自体の幅がありますので、ある幅以下は、レイアウトを変更する。例えば、タイトルとナビメニューを縦並びにするとか、をメディアクエリで設定するというこも必要になるでしょう。

Answer 2

縦書きというか、文字が折り返してしまう、という話だと思いますが、

「30DAYSトライアル」は11文字でフォントサイズが24px
「ディトラとは」は6文字でフォントサイズが16px
「コース一覧」は5文字でフォントサイズが16px
「お問い合わせ」は6文字でフォントサイズが16px

ですので、全てを横並びにして折り返さないようにするには、文字だけで11*24 + 6*16 + 5*16 + 6*16 = 536pxの幅が最低限必要になります。
実際にはさらに、margin-right: 40pxが3つあり、width: 75%となっていますから、(536 + 40*3)/0.75 = 875pxの幅が必要です。

つまり、解決方法としては、レイアウトを再検討してください。
どうやっても収まらないです。