带有填充的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”元素浮动，但这似乎运作良好。

我希望有帮助！