表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李堆疊在彼此

回答

相關問題