表td/UI李堆叠在彼此

我一直在练习css一段时间，今天发生了一个问题，我无法弄清楚。表td/UI李堆叠在彼此

我是“绘制”太空入侵者图片，当我尝试添加入侵者（alien1，alien2，alien3等），然后他们堆叠在彼此之上。我曾尝试将它们添加为列表并且也作为表格......它们都不起作用。我也尝试了display: inline/inline-block，但这使他们消失。

这可能是我的问题？

这里的链接：http://codepen.io/kaur16/pen/ONKOMo

来源

2016-05-23 Kaur16

请点击这里提供SO，而不是你的codepen代码示例。笔可以消失或被修改，所以未来的读者不能从你的问题中获利。 – roNn23

确保您的外星人有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>

来源

2016-05-23 18:19:34

像下面添加一个类的CSS。该类添加到每个阶级异己像<td class="alien1 add"></td>

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

我所做的是增加一个display:inline-block和添加的50px一个margin双方各外星人的两侧。

来源

2016-05-23 18:13:16

表td/UI李堆叠在彼此

回答

相关问题