html - 如何使用 CSS 使用边界框包围链接

Question

在响应式设计网站中，我需要并排显示四个链接，并将这 4 个链接的集合包含在一个自动调整大小的边框内。如果所有四个链接都不能水平放置在一行中而不相互覆盖，那么那些不能放置的链接应该下降到后续行，并且边界框的大小应该增加。

我的主要问题是边界框...没有围绕链接或正确调整大小。我做错了什么？

这是我尝试过的代码和 CSS:http://jsfiddle.net/K3jyD/

HTML:

<div class="boundingbox">
    <div class="boundeditem">
        <div style="text-align: center;"><a title="Link Number One" href="http://www.abc.com/1/"><span><strong>NUMBER ONE</strong></span></a>
        </div>
    </div>
    <div class="boundeditem">
        <div><a title="Link Number Two" href="http://www.abc.com/2/"><span><strong>NUMBER TWO</strong></span></a>
        </div>
    </div>
    <div class="boundeditem">
        <div><a title="Link Number Three" href="http://www.abc.com/3/"><span><strong>NUMBER THREE</strong></span></a>
        </div>
    </div>
    <div class="boundeditem">
        <div style="text-align: center;"><a title="Link Number Four" href="http://www.abc.com/4/"><span><strong>NUMBER FOUR</strong></span></a>
        </div>
    </div>
</div>

CSS:

.boundingbox {
    border: 1px solid red;
    padding:10px;
    margin:10px;
    clear:both;
}

.boundeditem {
    width:25%;
    min-width:25%;
    max-width:25%;
    float:left;
    padding:10px;
}

.boundeditem div {
    text-align: center;
}

.boundeditem a {
    text-decoration: underline;
}

除了普通的旧 html 和 css 之外，我不允许在此元素中使用 jquery 或外部 javascript 库。

Answer 1

float:left 将您的链接带到边界框之外。试试这个:

.boundeditem {
    width:25%;
    min-width:25%;
    max-width:25%;
    display: inline-block;
    padding:10px;
}

如果您想要四个链接而不是三个链接，请使宽度略小于 25% 并将填充放在 boundeditem inside 的 div 中，而不是 boundeditem 本身。

.boundeditem {
    width:24%;
    min-width:24%;
    max-width:24%;
    display: inline-block;
}
.boundeditem div {
    text-align: center;
    padding: 10px;
}