如何在單行中顯示帶有邊框的跨度

我有內部具有四個跨度的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中引入的。

來源

2014-03-13 user3106462

邊界添加到總寬度。還要檢查這個帖子 http://www.paulirish.com/2012/box-sizing-border-box-ftw/ 我在我的一個項目曾經使用它沒有問題 – MentalRay

yhea但如果他想的跨越25％寬，他不能添加2px邊界 – Ekusu

http://jsfiddle.net/e7wLu/在這個小提琴它正在工作。 – 2014-03-13 08:36:28

。 100% + 2px邊框上的每個span都在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

來源

2014-03-13 08:42:00 Ruddy

哦，這是一個好主意，沒有想到'outline'。 – Ekusu

我使用大綱，它工作正常。很感謝。 – user3106462

當你想100%寬度添加邊框將破壞該試試這個

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

來源

2014-03-13 08:35:10

但它不會是25％在較大的屏幕上會有很大的差異 – Ekusu

這是將邊界視爲包含元素的維度還是不包含？這是個問題... – 2014-03-13 08:43:24

爲了使其在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％上。

來源

2014-03-13 08:45:47 Gil

這個解決方案溢出右邊的容器，因爲你在''sp'上使用了'width：100％';見這裏：http://jsfiddle.net/chadocat/PCtM8/4/ –

@chadocat你是對的我會更新我的答案:) – Gil

您可以隨時使用表格。

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

來源

2014-03-13 08:51:53 MentalRay

如何在單行中顯示帶有邊框的跨度

回答

相關問題