display:flexと%を使って、テキストを横1列に並べたい

Question

display:flexを使って、テキストをきれいに横1列にしたいと思い、
下記のようなHTML、CSSを書きました。

HTML
<ul>
    <li><a href="">ホーム</a></li>
    <li><a href="">会社案内</a></li>
    <li><a href="">サービス一覧</a></li>
    <li><a href="">お問い合わせ<span>注1</span></a></li>
</ul>


CSS
ul {
    display: flex;
}

ul li {
    list-style: none;
    border-right: 1px solid #000;
    padding-right: 2%;
    margin-right: 2%;
}

ul li span {
    margin-left: 2%;
}

しかしこの記述では、「注1」が下段に落ち、

「お問い合わせ　注
1」

とか

「お問い合わせ
注1」

となってしまい、きれいな横1列になりません。

「ul li span」のmargin-leftをpx単位に設定すればきれいな横1列になるようなのですが、
レスポンス対応を考えているため、できるだけ%で設定したいと考えています。

その他に考えた方法としては、liの横幅を

ul li {
    width: 150px;
}

などのように長めに設定しておけば、
「ul li span」のmargin-leftを%で設定しても横1列になってくれるのですが、
事前にliの長さを設定するのはあまり望みません。

liの長さは、できるだけ「テキストの長さ（自動で決定される）＋右余白」で作りたいと考えています。
（もちろん「左余白＋テキストの長さ（自動で決定される）＋右余白」でも構いません）

長々と書きましたが、今回、ご教授いただきたいことをまとめると、

「display:flexと%を使って、テキストを横1列にする。
特に『お問い合わせ』と『注1』の間に余白を入れつつ、きれいに横1列に並ばせるにはどうするか？」

という点です。

よろしくお願いします。

Answer 1

下記でどうでしょう。

ul {
    display: flex;
}

ul li {
    list-style: none;
    border-right: 1px solid #000;
    padding-right: 2%;
    margin-right: 2%;
    white-space: nowrap; /* 追加 */
}

ul li span {
    margin-left: 2%;
}

Comments

[cheshire-cat]

ありがとうございました。できました。
何か複雑な設定をしなければならないのかな？　と面倒な気持ちがあったのですが、1行のみの追加で解決するなんてびっくりしました。

Answer 2

  <li><a href="">ホーム</a></li>
  <li><a href="">会社案内</a></li>
  <li><a href="">サービス一覧</a></li>
  <li><a href="">お問い合わせ<span>注1</span></a></li>
</ul>


CSS
ul {
  display: flex;
}

ul li {
  list-style: none;
  border-right: 1px solid #000;
  padding-right: 2%;
  margin-right: 2%;
}

ul li span {
  margin-left: 2%;
コード

Answer 3

vsでマークアップしてみましたが全て横に並びますよ![![