意図しない改行を無くしたい

Question

下記のコードで書いていると、１枚目の画像のような意図しない改行が含まれてしまいます。
<nobr>タグやCSSでwhite-space:whiteを設定すると出来るという記事を見たのですが、やってみてもできません。
何か方法はないでしょうか。

ご回答よろしくお願い致します。

完成物は２枚目で、class=”navi-list”を完成物のようにレイアウトしたいです。

        <div class="site-navi">
          <ul class="navi-list">
            <li>
              <p class="navi">トップページ</p>
              <p class="enNavi">HOME</p>
            </li>
            <li>
              <p class="navi">医院紹介</p>
              <p class="enNavi">CLINIC</p>
            </li>
            <li>
              <p class="navi">診療案内</p>
              <p class="enNavi">SERVICE</p>
            </li>
            <li>
              <p class="navi">院長・スタッフ紹介</p>
              <p class="enNavi">STAFF</p>
            </li>
            <li>
              <p class="navi">アクセス</p>
              <p class="enNavi">ACCESS</p>
            </li> 
          </ul>
        </div> 

.navi-list {
  white-space: nowrap;
}

.navi-list li {
  float: left;
  list-style: none;
  padding: 0 55px;
}

.navi {
  font-size: 14px;
}

Comments

[yambejp]

質問に画像が含まれていないようですが？

[y_waiwai]

画像が表示されてないようです
編集してみてください

[shiabinu0607]

すみません、画像足しました。
よろしくお願い致します。

Answer 1

なんともいえないですがメニュー的なものはやはりflexの方がやりやすいのでは？

Comments

[yambejp]

.navi-list {
display:flex;
justify-content:space-around;
padding:0px;
}

.navi-list p {
text-align:center;
}
.navi-list li {
list-style: none;
width:15%;
background-Color:yellow ;
}

.navi {
font-size: 14px;
}

[shiabinu0607]

すみません、画像足し忘れておりました。

[yambejp]

５つの要素の最後の要素が左にきてしまうということですよね？
ということはオーバーフローしているのでfloat: leftでやる限界なのでしょう
flexはだめなんですか？

[shiabinu0607]

そうです。
flexで問題ないです。
やってみたらできました！

ありがとうございます！！

Answer 2

こういうことでしょうか？

.navi-list li {
  /* float: left; 削除 */
  display: inline-block;  
  list-style: none;
  padding: 0 55px;
}

Comments

[shiabinu0607]

すみません、画像足し忘れておりました。