Question

我有多个文本框，我放在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个盒子，一个带有文本，一个没有但是盒子似乎不能100％相互重叠。我不知所以任何建议都会有所帮助

包括我试图做出一些改动的小提琴：http://jsfiddle.net/sX2BC/

Answer 1

首先，容器和盒子上有许多边距/填充物会影响重叠。删除其中的大部分将允许框与容器很好地重叠。接下来，我删除了框中的float:left，因为没有必要，并将从常规流中删除该框。最后，为了使标签显示为一个框，我将其显示更改为display:inline-block。它应该接近你想要的：

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

干净的方式重叠元素？

1 个答案: