Question

我已经练习了一段时间的CSS，今天出现了一个我无法弄清楚的问题。

我正在“绘制”太空入侵者图片，当我尝试添加入侵者（alien1，alien2，alien3等）时，他们会互相叠加。我试图将它们添加为列表，也作为表格...它们都不起作用。我也试过display: inline/inline-block，但这让他们消失了。

这可能是我的问题？

以下是链接：http://codepen.io/kaur16/pen/ONKOMo

Answer 1

将类似下面的类添加到css中。将该类添加到每个外来类，如<td class="alien1 add"></td>

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

我所做的是添加display:inline-block并在每个外星人的两侧添加margin 50px。

Answer 2

确保你的外星人的execve()类型display和inline-block至少为外星精灵的宽度：

margin-right

更新了codepen：

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

此外，您可能需要考虑创建一个包含常见外星人设置的主外星人类：

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

然后列出你的特定外星人：

.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 / Ul li叠加在一起

2 个答案: