帶有填充的CSS span包裹

Question

我有一個非常煩人的問題。 我必須做一個「表」，它包含3個元素相鄰。前兩個元素是簡單的div，向左浮動，但第三個元素有點複雜。它必須在每邊都有填充物。順便說一句，這是一個可以在行尾包裝的文本。 我的問題是，當這個元素在第一行的結尾處中斷並且第二行的開始處沒有填充屬性時。

我在這做了一個simple example page。

您有任何解決方案嗎？我已經嘗試了很多不同的方式... 當第三個元素旁邊的空格爲空時，沒關係，但是當我預先將這些方塊加入時，它完全破碎了。

Answer 1

Ben， 我不明白你爲什麼會用兩個跨度纏繞在同一個元素上。此外，我很少使用跨度，因爲他們浮躁。從我所瞭解的你想要3塊與最後一個要填充的元素並排坐在一起。

我會建議簡單地向padded div（或id）添加額外的類。

嘗試......

[HTML]

<h2>double span with floated elements next to it</h2> 
<div class="box">box #1</div> 
<div class="box">box #2</div> 
<div class="box boxPadded"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus laoreet. 
</div> 
<div class="cleaner"></div> 

[CSS]

.cleaner{clear: left; line-height: 0; height: 0;} 
.box{margin-right: 5px; width: 100px; min-height: 25px; float: left;} 
.boxPadded{padding: 3px 3px 9px 3px; word-wrap: break-word;} 

所以，現在第三個元素具有 「框」 類，以及屬性因爲它是自己獨立的屬性「boxPadded」。

「最小高度」主要針對第三個元素。你實際上可以把它放在boxpadded類，但我有點懶。如果文本大於元素，它將允許元素拉長。

「清潔」是我浮動元素後使用的東西。它的'通常不需要，除非你在浮動元素中有元素。

「文字換行」將允許比元素長的非空格字符串環繞框。

Answer 2

你需要寬度是動態還是可以固定大小？我會刪除跨度，浮動div.inner和硬編碼其寬度。類似這樣的：

.container { 
    overflow: hidden; 
} 

.inner { 
    float: left; 
    padding: 7px; 
    width: 106px; /* you could use percentages to fix the widths if you'd like to keep things dynamic. */ 
} 

您可以調整填充並避免將邊框設置在一起。將溢出設置爲隱藏在容器上將強制容器元素適合其內部的所有浮動元素。這樣可以避免插入div來清除浮動元素。

你也可以表達這種嵌套列表，因爲它是最好的，以避免不必要的div：

<ol id="examples_list"> 
    <li> 
    <ul class="container"> 
     <li class="box">...</li> 
     <li class="box">...</li> 
     <li class="inner">...</li> 
    </ul> 
    </li> 
</ol> 

與...

#examples_list, #examples_list ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

款式也以類似的方式。

Answer 3

好的，基於@b_benjamin對上述評論的迴應，我想我可能有一個可能的解決方案，但我也認爲它會依賴於一些CSS，可能在舊版瀏覽器中運行不佳，但這是一個簡單的概念，可以可能會用其他技巧進行調整。

這似乎工作在最新的FF，Chrome和IE9。

首先，HTML：

<div style="width:340px;"> 
    <!-- a list of text, with some time's marked up --> 
    <ul class="sched"> 
     <li><b>17:55</b><b>18:10</b> <a href="#">Lorem ipsum dolor</a> sit posuere.</li> 
     <li><b>18:20</b><b>18:30</b> <a href="#">Lorem ipsum dolor</a> sit amet orci aliquam.</li> 
     <li><b>18:20</b><b>18:30</b> <a href="#">Class aptent</a> taciti sociosqu ad sed ad.</li> 
     <li><b>19:05</b><b>19:17</b> <a href="#">Mauris et urna et</a> ante suscipit ultrices sed.</li> 
     <li><b>19:05</b><b>19:17</b> <a href="#">Proin vulputate pharetra tempus.</a> Quisque euismod tortor eget sapien blandit ac vehicula metus metus.</li> 
    </ul> 
</div> 

現在一些CSS：（我使用了基於b_benjamin的樣品照片簡單的顏色主題）

/* reset default list styles */ 
.sched, .sched li{ 
    list-style:none; 
    font-size:14px; 
    padding:0; 
    margin:0; 
} 
.sched li{ 
    position:relative; 
    padding:0 10px; 

    margin:10px 0; 
    background:#631015; 
    color:#FFF; 
} 
.sched b{ 
    position:relative; 
    left:-10px; 
    display:inline-block; 

    padding:2px 10px; 
    font-weight:none; 
    background:#FFF; 
    color:#666; 

} 
/* some light styling for effect */ 
body{ 
    background:#cc222c; 
} 
.sched li a{ 
    color:#FF9; 
} 

說明：

box model r要求在內聯元素（文本）上實現填充的特定思考過程。你可以做的一件事是簡單地在整個包含框中填充填充。

在我的概念中，我使用了UL列表，每個LI元素都是容器。我在容器上使用了10px的填充。

.sched li{ 
    padding:0 10px; 
} 

這將爲我們提供我們的填充物，但它會導致我們的「時間」要素也有這種填充。我的「絕招」是通過使用等於填充負的相對位置「修理」這樣的：

.sched b{ 
    display:inline-block; /* make these items act like block level elements */ 
    position:relative; /* give the b elements a relative position*/ 
    left:-10px; /* offset them equal to the padding */ 
} 

有做的最後一件事，這就是確保父元素也是位置：相對於這樣的孩子元素將使用它包含的尺寸：

.sched li{ 
    position:relative; /* needed for B elements to be offset properly */ 
    padding:0 10px; 
} 

下面是在Chrome上看起來像什麼的剪輯。

你可以，當然，玩弄填充。也許還有一些解決方案可以使「B」元素浮動，但這似乎運作良好。

我希望有幫助！