2

我在 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/

4

1 回答 1

1

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

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

于 2013-03-16T03:38:00.477 回答