以乾淨的方式重疊元素？

我有多個文本框，我放在Bootstrap RowFluid和Span12中。以乾淨的方式重疊元素？

浮動剩餘，根據寬度，導致4個框顯示在每一行。

我想要做的是在每個框的右上角放置一個X，以便有人可以點擊X並刪除框。

我似乎無法弄清楚如何以一種乾淨的方式重疊。有人可以提出一種方法，我會破解它嗎？

HTML

<div class="box-list"> 
    <div class="row-fluid"> 
     <div class="span12"> 
      <a href="/box/1">First box</a> 
      <a href="/box/2">Second box</a> 
      <a href="/box/3">Third box</a> 
      <a href="/box/4">Fourth box</a> 
      <a href="/box/5">Fifth box</a> 
      ...etc 
     </div> 
    </div> 
</div>

CSS

.box-list a{ 
    width:22%; 
    height:100px; 
    font-size:20px; 
    line-height: 50px; 
    padding:25px 0 25px 0; 
    text-align: center; 
    border: 1px dashed #333333; 
    float:left; 
    background-color:#EEE; 
    margin: 5px 1% 5px 1%; 
    color:#333; 
    display:block; 
}

我已經嘗試了一些東西，但一直沒能得到它看的權利都沒有。我試着將鏈接放在容器中，並將容器的CSS設置爲上面的CSS。然後，我添加了新的「刪除」鏈接，其中文本只是一個X，並把position:absolute，但它會導致非常奇怪的結果。我已經嘗試創建2個文本框和1個框，但這些框不能相互重疊100％。我不知所措所以任何建議將有助於

包括一些變化的小提琴，我試圖：http://jsfiddle.net/sX2BC/

來源

2013-03-16 Terence Chow

與位置刪除鏈接：絕對會是最簡單的方法。有它的權利：0;頂部：0（或10px，等如果你想填充）。只要確保你放入鏈接的div有'position：relative;' – kennypu 2013-03-16 02:59:59

@kennypu出於某種原因，當我這樣做時，X不會出現在頂部。它出現在下面的幾個像素。爲什麼有這個原因？當我嘗試製作完全相同的盒子時，它會顯示幾個像素（可能是10-20）。我似乎無法讓自己完全相同的盒子重疊。 – 2013-03-16 03:14:24

你能做一個你在做什麼的小提琴嗎？ – kennypu 2013-03-16 03:18:31

首先，你必須在容器和盒受影響的重疊在許多利潤/墊襯。刪除其中的大部分將允許框與容器很好地重疊。接下來，我刪除了箱子上的float:left，因爲它不是必需的，並且會從常規流程中移除箱子。最後，爲了將標籤顯示爲一個框，我將其顯示改爲display:inline-block。它應該是接近你想要的東西：

更新小提琴：http://jsfiddle.net/sX2BC/3/

來源

2013-03-16 03:38:00 kennypu

令人驚歎。謝謝你，先生。沒有意識到填充在空盒子上做任何事情。再次感謝你！ – 2013-03-16 03:49:18

以乾淨的方式重疊元素？

回答

相關問題