html - きれいに要素を重ねる？

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/