HTMLギャラリーリストの任意のスペース、削除/修正方法

Question

サイト：https://s123c.github.io/design.html

3 x 4ポートフォリオギャラリーで要素のリストを作成しようとしています。しかし、最初のイメージと行の先頭の間にはスペース（幅3アイテム）があります。私は似たような話題を探すことを試みましたが、解決策が一致しないので、私の問題に似たものを見つけることはできません。

Answer 1

Flaxboxは要素をレイアウトするための驚くべき特性です。私はウェブサイトを簡単に見てきましたが、.cssファイルの最後にul {display：flex}を追加するだけで、この問題は表示されなくなりました。

#galleryの現在のレイアウトコードを削除し、次のコードを追加します。

.container-a4 { 
    display: table; 
} 
.caption-style-4 { 
    display: table-row; 
} 

.caption-style-4 li { 
    display: table-cell; 
} 

Answer 2

良い解決策の1つは、Foundationのようなフレームワークを使用することです。水平スクロールのようなことは起こらず、ウェブサイトのモバイル版を作成するのに役立ちます。 フレームワークがこの問題の解決に役立つと確信しています。

もちろん、これは、foundationを適切に使用する場合にのみ発生します。使いやすいです。

Answer 3

何も使用する必要はありません。スタイルコードにこの行を挿入するだけです。 Display table、table-row、およびtable-cellは問題を引き起こすことがあるため、フローティング要素でリストを使用することをお勧めします。

.row { 
    overflow: auto; 
} 

ULタグは少し不気味なので、ブロック要素として、ULリストを作用させるために、オーバーフロー属性を使用するのが最適です。

要素を左に並べ替えるので、ul要素は高さを取得しないため、オーバーフロー属性を使用する必要があります。