雪碧背景 - 嵌套嵌套？（HTML冻结）

这是另一个CSS更改唯一的问题。 [ 这里演示了雪碧背景 - 嵌套嵌套？（HTML冻结）

所以，我有一些样式元素的背景精灵，并且想要使用endcaps（TEXTFIELD）和重复背景设置文本样式。在示例中，我使用了填充空格将内容排成一行，这让我可以设置背景颜色，但不是我认为的背景。我一直在盯着这个太久，需要一些建议。是否可以按照我想要的方式排列内容，而不更改HTML？

<label> Enter Zipcode: </label> 
<span class='bg'> 
    <span class='leftcap'> 
     <span class='rightcap'> 
      <input type="text" class="textfield" name="zipCode" /> 
     </span> 
    </span> 
</span>

编辑：我吐口水在这里，不知何故失去了我的jsfiddle，和gar。我的问题仍然存在......另一个jsfiddle链接了一些相似之处，并且作为一个基地，但是当我建立时，我几乎改变了一切。好东西我在这里复制了一点。

edit2：这是一个部分重拍jsfiddle。 http://jsfiddle.net/dreamling/P3Jev/3/

来源

2011-12-07 Dreamling

“我已经一字排开的东西在这里使用的填充空间的例子，它可以让我设置了背景颜色，但不是我认为的背景。“ - 我不明白，你可以设置你喜欢的任何背景。例如：http://jsfiddle.net/thirtydot/P3Jev/4/ – thirtydot

@thirtydot哇，好吧，哈哈。我接近了。好的，我该如何让endcaps和bg一样大小？我不断增加身高，但没有任何反应。（感谢您的耐心） – Dreamling

似乎文本框并不是完全位于右帽的范围内，我似乎无法使右帽或左帽稍高一点。我可以让leftcap更高，比如说50px，但是打破了这个框，而不是扩展它。 – Dreamling

我改变了outer2以显示：inline-block，它修复了它。
奇怪间隙那里，因为内联块元件是空白dependend（和空白是恰好在4像素的标准字体大小）
修正：添加字母间距：-4px +行高： 1px的。

见http://jsfiddle.net/L8TyD/6/

编辑：我删除了固定的宽度，并增加了黑客使它在IE7工作

来源

2011-12-07 22:19:38 ptriek

隐藏在她的jsFiddle演示的JavaScript面板中的魔术语是“可以在没有固定大小的情况下实现目标”。据我了解，'.b'上不应该有固定的宽度。 – thirtydot

@thirtydot据我了解，梦想特别不想在外部元素的固定宽度，如在你的答案。无论如何，我删除了宽度并更新了我的答案。 – ptriek

对不起，忽略了js，我试图删除它。但我会看看任何解决方案。 – Dreamling

雪碧背景 - 嵌套嵌套？ （HTML冻结）

回答

相关问题

雪碧背景 - 嵌套嵌套？（HTML冻结）