display:flex と<li>でちょっと困ったやつ

liタグに display:flex をつけたらマーカーが消えちゃう

↓みたいな要素を横並びにしたくてスタイルを当てていたんだけど

<ul>
  <li>
    <h3>hogehoge</h3>
    <div>
      <input type="button" value="button"/>
    </div>
  </li>
</ul>

ul {
  list-style: square inside;
}
li {
  display: flex;
  align-items: center;
}
input {
  margin-left: 10px;
}

こんな風にマーカーが消えちゃう。

原因は、<li>にdisplay: flex;が指定されていたから。 なので、<div>とかを噛ませてやるとうまく出てくれる。

<ul>
  <li>
    <div class="flex">
      <h3>hogehoge</h3>
      <div>
        <input type="button" value="button"/>
      </div>
    </div>
  </li>
</ul>

.flex {
  display: flex;
  align-items: center;
}
input {
  margin-left: 10px;
}