改行させたくない （横に並べたい）

Question

以下HTML

<nav class="gloval-menu"> <div class="container"> <ul>

    <li class="english" data-target="concept">CONCEPT</li>
    <li class="english" data-target="about">ABOUT</li>
    <li class="english" data-target="photo">PHOTO</li>
 
  </ul>
</div>

</nav> 上記のコードに<nobr>を以下のように付け加えてみました <nav class="gloval-menu"> <div class="container"> <ul> <nobr> <li class="english" data-target="concept">CONCEPT</li> <li class="english" data-target="about">ABOUT</li> <li class="english" data-target="photo">PHOTO</li> </nobr> </ul> </div> </nav> それでだめだったため以下のCSSに<white-space: nowrap;>を書き込みました

.container {
margin: 0 auto;
padding: 0 20px;
width: 100%;
max-width: 980px;
text-align: center;
white-space: nowrap;
}
以上を試しましたができませんでした。わかる方いましたらよろしくおねがいします。

Comments

[yambejp]

改行とはどのことを言っていますか？

CONCEPT、ABOUT、PHOTOが３段に表示されることですか？
それなら前回の質問の通りで解決していませんか？
https://teratail.com/questions/227264

[退会済みユーザー]

コードはMarkDown記法を使用してください。

Answer 1

「CSS li 横並び」[検索]

リストはブロックレベル要素のため、基本的に前後に改行が入ります。
ブロックレベル要素とインライン要素

それを踏まえて、横並びにするにはinline-blockにしたりいくつか手法があります。

CSSで要素を横に並べる主な3つのやり方
CSSでリストを横並びのメニューにする
【CSS】ul,olのリストを横並びにするときにfloatじゃなくてdisplay:inline-blockを使う方法

Comments

[s8_chu]

横から失礼します。
いずれの記事にも載っていないのでコメントしますが、この場合 `list-style-position` プロパティを inside にした上で flexbox が良いかなと思います。

[azuapricot]

ブロック要素　×　ブロックレベル要素　◎

[Takumiboo]

失礼いたしました