Таблица td/Ul li stack over eachother

Question

Я занимаюсь css в течение некоторого времени, и сегодня возникла проблема, что я не могу понять.

Я рисую изображение космического захватчика, и когда я пытаюсь добавить захватчиков (alien1, alien2, alien3 и т. Д.), То они складываются друг над другом. Я попытался добавить их в список, а также в таблицу ... Ни один из них не работает. Я также пробовал display: inline/inline-block, но это заставило их исчезнуть.

Какая у меня проблема?

Вот ссылка: http://codepen.io/kaur16/pen/ONKOMo

Answer 1

Убедитесь, что иностранцы имеют display тип inline-block и 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 и добавил margin из 50px в обе стороны каждого иностранца.