お互いの上にテーブルがあります

Question

私はしばらくの間CSSを練習していましたが、今日は私が把握できない問題が発生しました。

私はスペースインベーダーの画像を「描いています」と、インベーダー（alien1、alien2、alien3など）を追加しようとすると、それらは互いに重なり合ってしまいます。私はそれらをリストとして、またテーブルとして追加しようとしました...いずれも動作しません。私もdisplay: inline/inline-blockを試しましたが、それが消えました。

私の問題は何ですか？

ここのリンクです：http://codepen.io/kaur16/pen/ONKOMo

Answer 1

あなたのエイリアンはinline-blockのdisplay種類があり、少なくとも外国人スプライトの幅のmargin-rightていることを確認してください：

.alien1 { 
    width: 5px; 
    height: 5px; 
    margin-right: 60px; 
    display: inline-block; 
    box-shadow: 
    20px 5px 0 #FFF, 
    ..., 
    60px 40px 0 #FFF; 
} 

更新codepen：

http://codepen.io/anon/pen/LNwdpW

また、あなたが望むこと共通のエイリアン設定を含むマスターエイリアンクラスを作成することを検討する：

.alien { 
    width: 5px; 
    height: 5px; 
    margin-right: 60px; 
    display: inline-block; 
} 

その後、あなたの特定の外国人をリスト：

.alien1 { 
    box-shadow: 
    20px 5px 0 #FFF, 
    ..., 
    60px 40px 0 #FFF; 
} 

.alien2 { 
    box-shadow: 
    15px 5px 0 #FFF, 
    ..., 
    55px 40px 0 #FFF; 
} 

... 

それでは、あなたの外国人td要素は次のようになります。<td class="alien alien1"></td>

Answer 2

は、CSSに以下のようなクラスを追加します。 が<td class="alien1 add"></td>

.add{ 
    display: inline-block; 
    margin: 0px 50px; 
} 

のように、各外国人のクラスにそのクラスを追加します。どのような私がやったことはdisplay:inline-blockを追加し、各エイリアンの両側に50pxのmarginを追加されます。