html - 如何在单行中显示带边框的跨度

Question

我有一个 DIV，里面有四个 SPAN，如下所示，我想使用 CSS 将它们显示在横跨屏幕宽度的一行中。每个 SPAN 的宽度应等于屏幕宽度的 25%，边框宽度应为 2px。

<div>
    <span>1111111</span>
    <span>2222222</span>
    <span>3333333</span>
    <span>4444444</span>
</div>

我尝试了这个 CSS，但这导致最后一个 SPAN 显示在其他三个 SPAN 的下方。

div
{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
}

div > span
{
    display: block;
    float: left;
    border: 2px solid black;
    width: 25%;
}

我知道 box-sizing: border-box; 但我必须使用 CSS2，而 box-sizing 是在 CSS3 中引入的。

Answer 1

如您所愿，100% 宽度添加边框会破坏这一点。 100% + 每个 span 上的 2px 边框超过 100%。这会将一个推到下一行。

可能的解决方案:

使用轮廓，与边框几乎相同，但不计入整体宽度/高度。也会互相重叠。玩一玩，但它可能会满足您的需要。

div > span {
    display: block;
    float: left;
    outline: 2px solid black;
    width: 25%;
}

DEMO HERE

---

其他可能的解决方案:

在跨度上设置 margin: -2px。

div > span {
    display: block;
    float: left;
    border: 2px solid black;
    width: 25%;
    margin: -2px;
}

DEMO HERE

---

另一种可能的解决方案:

使用显示:表格。

html,body {
    margin: 0;
}
div {
    display: table;
    width: 100%;
}
div > span {
    display: table-cell;
    border: 2px solid black;
    width: 25%;
}

DEMO HERE