li元素的背景顏色和溢出滾動

我創建了一個簡單的HTML源代碼，並應用了小CSS樣式表吧：li元素的背景顏色和溢出滾動

html { 
    width: 100%; 
} 
body { 
    font-family: Calibri, Tahoma, Geneva, sans-serif; 
    padding: 20px; 
} 
pre { 
    padding: 0; 
    margin: 0 auto; 
    border: 1px solid #888; 
    font-family: Menlo,Monaco,Consolas,monospace; 
    color: #000; 
    width: 80%; 
    overflow: auto; 
} 
pre li { white-space: pre; } 

ol { margin-top: 0; margin-bottom: 0; /* IE indents via margin-left */ 
    color: #979797; background: #E3E3E3; } 
.li1 { background: #F5F5F5 } 
.li2 { background: #eee }

我有一個預格式化標籤內的有序列表。每個其他列表元素可以是類別屬性li1或li2（其目的是交替顏色）。列表元素需要white-space: pre，因爲文本節點之前和之後的空白是重要的。 pre是包含元素的80％（最終佔窗口寬度的80％）。如果x維上溢出，我想滾動。

我在上面的CSS中做了所有這些，並且它幾乎可以在的下工作。我遇到的問題是列表元素的背景顏色不隨內容擴展。他們似乎在下面的圖片，我滾動一路正確地證明封頂到pre和/或醇element的原始寬度：

List Element background colors don't extend

我用CSS修修補補一會兒，但我無法確定此問題或修復的根本原因。尋找關於這個的一些建議，謝謝。

此問題的完整源代碼如下所示。注意：對於以下代碼的將成爲編輯者，pre元素旨在作爲預格式化文本在一行上，並對其進行格式設置，否則會改變內容。

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
    <title>Test Site</title> 
    <style type="text/css"> 
    html { 
    width: 100%; 
    } 
    body { 
     font-family: Calibri, Tahoma, Geneva, sans-serif; 
     padding: 20px; 
    } 
    pre { 
     padding: 0; 
     margin: 0 auto; 
     border: 1px solid #888; 
     font-family: Menlo,Monaco,Consolas,monospace; 
     color: #000; 
     width: 80%; 
     overflow: auto; 
    } 
    pre li { white-space: pre; } 

    ol { margin-top: 0; margin-bottom: 0; /* IE indents via margin-left */ 
     color: #979797; background: #E3E3E3; } 
    .li1 { background: #F5F5F5 } 
    .li2 { background: #eee } 
    </style> 
</head> 

<body> 


<pre class="php"><ol><li class="li1">pre a &#123; text-decoration: none &#125;</li><li class="li2">pre a:hover &#123; background: #C8C8C8 }</li><li class="li1">pre li &#123; white-space: pre; &#125;</li><li class="li2">&nbsp;</li><li class="li1">.php ol &#123; margin-top: 0; margin-bottom: 0; /* IE indents via margin-left */</li><li class="li2">   color: #979797; background: #E3E3E3; }</li><li class="li1">&nbsp;</li><li class="li2">&nbsp;</li><li class="li1">&nbsp;</li><li class="li2">.php .li1 &#123; background: #F5F5F5 }</li><li class="li1">.php .li2 &#123; background: #eee }</li><li class="li2">&nbsp;</li><li class="li1">&nbsp;</li><li class="li2">.php .st0 &#123; color: #C0C } /* string content */</li><li class="li1">.php .st_h &#123; color: #F0C } /* string content single quoted */</li><li class="li2">.php .sy0 &#123; color: #000 } /* semi-colon, operators */ </li><li class="li1">.php .br0 &#123; color: #000 } /* parens */</li><li class="li2">.php .kw2 &#123; color: #00F } /* php tags */</li><li class="li1">.php .sy1 &#123; color: #00F } /* php tags */</li><li class="li2">.php .nu0 &#123; color: #F00 } /* numbers */</li><li class="li1">.php .kw3 &#123; color: #096 } /* core language functions */</li><li class="li2">.php .re0 &#123; color: #09F; font-weight: bold; } /* variables */</li><li class="li1">.php .kw1 &#123; color: #069; font-weight: bold; } /* control statements? */</li><li class="li2">.php .kw4 &#123; color: #069; font-weight: bold; } /* bool? */</li><li class="li1">.php .co1 &#123; color: #FF8400 } /* Forward slash comments */</li></ol></pre> 
</body> 
</html>

來源

2012-10-01 user17753

介意分享的HTML？ –

@KaleMcNaney添加了html。請注意，根據您的解決方案，您可能需要手動顯着減小瀏覽器窗口的寬度，以強制出現滾動溢出情況。 – user17753

@krish http://jsfiddle.net/947Pd/ – user17753

pre用80％固定，所以替代顏色停在那裏，我們可以使用下面的樣式來擴展li，直到最後。

.li1 { background: #F5F5F5;width:200%; } 
    .li2 { background: #eee;width:200%; }

Demo

來源

2012-10-01 21:11:19 krish

li元素的背景顏色和溢出滾動

回答

相關問題