【css】リストで黒ポチが消えない時の対処法

HTML／CSS

2020.02.052024.02.06

CSSで黒ポチ（中黒）を消したい場合、一部の解説では以下のようになっています。
HTML

<ul class="no_poti">
<li>みかん</li>
<li>りんご</li>
<li>バナナ</li>
</ul>

CSS

.no_poti {
  list-style: none;
}

確かにこれでも消える時もあります。

が、一部の機種、ブラウザでは消えない模様。

私の環境だと以下のようになりました。

OK　→　Mac Chrome、 Mac Firefox
NG　→　Mac Safari、 iPhone Chrome

.no_poti {
  display: list-item;
  list-style: none;
}

２行目のように
display: list-item;
や
display: inline-block;

等と、display:

…を入れるのが安全みたいです。