如何在单行中显示带边框的跨度答案

【问题标题】：How to display spans with border in single line如何在单行中显示带边框的跨度
【发布时间】：2014-04-17 20:30:47
【问题描述】：

我有一个内部有四个 SPAN 的 DIV，如下所示，我想使用 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，并且 CSS3 中引入了 box-sizing。

【问题讨论】：

边框添加到总宽度。另请查看此帖子paulirish.com/2012/box-sizing-border-box-ftw我在我的项目中使用过一次没有问题
是的，但如果他希望跨度为 25% 宽，他不能添加 2px 边框
jsfiddle.net/e7wLu 在这个小提琴中它正在工作。
@Sakhal Turkaystan 是的，因为您没有使用 100% 的可用空间。
@SakhalTurkaystan 那不是25% 都是这样...

标签： html css

【解决方案1】：

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

可能的解决方案：

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

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

另一种可能的解决方案：

使用display: table。

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

DEMO HERE

【讨论】：

【解决方案2】：

为了让它在 css2 中工作，你必须要有创意。这不是最漂亮的解决方案，但它会起作用。

HTML：

<div>
    <span><span class="sp">1111111</span></span>
    <span><span class="sp">2222222</span></span>
    <span><span class="sp">3333333</span></span>
    <span><span class="sp">4444444</span></span>
</div>

CSS：

div
{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
}
div > span
{
    display: block;
    float: left;
    width: 25%;
}
span.sp {
    display: block;
    border: 2px solid black;
}

我在这里所做的是添加了另一个跨度。外跨保持 25% 的大小，而内跨在其容器的 100% 上。

【讨论】：

此解决方案溢出右侧的容器，因为您在.sp 上使用了width:100%;，请参见此处：jsfiddle.net/chadocat/PCtM8/4

【解决方案3】：

试试这个

 <html>
<head>
<INCLUDE BOOTSTRAP.CSS>
<style>
/*div
{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
}*/

.blockk
{
    display: block;
    float: left;
    border: 2px solid black;
    /*width: 25%;*/
}
</style>
</head>
<div>
    <div class="span3 blockk" >1111111</div>
    <div class="span3 blockk">2222222</div>
    <div class="span3 blockk" >3333333</div>
    <div class="span3 blockk">4444444</div>
</div>
</html>

【讨论】：

但不会是 25%，在大屏幕上会有很大差异
边界是否被视为包含元素的尺寸？这就是问题...

【解决方案4】：

顺便说一句，您总是可以使用表格。

<table>
    <tr>
    <td>1111111</td>
    <td>2222222</td>
    <td>3333333</td>
    <td>4444444</td>
    </tr>
</table>

table
{
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}

td
{
border: 2px solid #000;
cellspacing: 0;
cellpadding: 0;
}

http://jsfiddle.net/GmJb9/

【讨论】：