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并在CSS3中引入了box-sizing。

Answer 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

Answer 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％上。

Answer 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>

Answer 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/

如何在单行中显示带边框的跨距

4 个答案: