CSS - ボタンの配置が正しくありません

Question

何をしても (数時間)、<div class="kafelek"> を隣り合わせに配置できません。現在のコードは次のようになります:

リーリー リーリー

複数のオプションを試してみましたが、結局すべてが混乱してしまいます。

次のようになります: ウェブサイトの混乱

8 つの .kafelek (つまりボタン) をそれぞれ 1 行で完全に整列させ、.pre1 および .pre2

と整列するように適切に中央揃えにしたいと考えています。 ＃＃＃助けてください;-;＃＃＃

Answer 1

ボタン コンテナの幅が 0 であるため、フレックスボックスが適切に動作しません。幅を追加すると問題が解決します。

リーリー

ボタンを上記の pre とほぼ揃えるために、60% の幅を追加しました。現在、pre には float プロパティ セットがあります。理想的には、親コンテナーでページ コンテンツの境界を強制し、float CSS プロパティの使用を回避する必要があります。