雪碧背景 - 嵌套嵌套？（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凍結）