什麼CSS將防止這些嵌套列表項目的重疊？

請將以下HTML/CSS視爲webpage。它顯示了圍繞各種元素的邊框。包含列表有意允許在固定寬度內水平滾動。問題在於，當您滾動到輪廓的最右側時，可以看到內部元素的邊框（所有熱門顏色）相互重疊。期望的效果是它們都與包含元素完全齊平（在右側），因此不會發生重疊。什麼是最簡單的CSS來完成這個？什麼CSS將防止這些嵌套列表項目的重疊？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>CSS Problem</title> 
<style type="text/css"> 
ul { 
    padding: 0 0 0 20px !important; 
    margin: 0 !important; 
    width: 300px !important; 
    border: solid 1px orange; 
    height: auto; 
    overflow: visible; 
} 
li, span { 
    padding: 0; 
    margin: 0; 
} 
#top { 
    border: solid 1px black; 
} 
#top > li { 
    overflow-x: auto; 
    overflow-y: hidden; 
    border: solid 1px yellow; 
    margin-left: -20px; 
} 
li { 
    display: block; 
    border: solid 1px red; 
} 
li, ul, span { 
    width: auto; 
    white-space: nowrap !important; 
} 
</style> 
</head> 
<body> 

<ul id='top'> 
    <li id='trunk'> 
     <span>This is the trunk</span> 
     <ul> 
      <li><span>This is the first line item</span> 
      <ul> 
       <li><span>This is the first subitem</span><ul></ul></li> 
       <li><span>This is the second subitem</span><ul></ul></li> 
       <li><span>This is the third subitem</span><ul></ul></li> 
      </ul> 
      </li> 
      <li><span>This is the second line item</span><ul></ul></li> 
      <li><span>This is the third line item</span><ul></ul></li> 
     </ul> 
    </li> 
</ul> 

</body> 
</html>

編輯：

下面的圖像顯示了一個示例的輪廓。請注意，寬度是固定的，如果用戶鍵入的標題長度超過可查看區域中的標題，則可以向右滾動。請注意，突出顯示的項目及其子項均以淺灰色包裹。用於調試的右側有一些橙色標記。

http://drop.io/dfhejyj/asset/outline-png

下圖顯示的是同一大綱滾動到右側。滾動是故意的，不能被消除。問題是，當我向右滾動時，標題突出到包含UL標籤（以淺灰色顯示）之外。同樣，用橙色標記。期望的效果是，橙色標記和灰色區域將始終在選擇區域右側（由滾動條分隔）再次齊平，並且滾動條將始終保持不變（只要任何標題足夠長生產它）。

http://drop.io/dfhejyj/asset/outline-scrolled-to-right-png

DigruntedGoat的評價是完全正確的。但是，我需要一個糾正方法。這可能會更容易與舊的IE瀏覽器使用的破碎的盒子模型一起工作。

來源

2010-02-05 Mario

我終於可以通過增加一個額外的容器來解決這個問題：

http://jsbin.com/itevo/2

感謝Sam H.和DisgruntedGoat誰花時間來提供一些指導。 :)

來源

2010-02-06 15:12:38 Mario

li, span { 
    overflow: hidden; 
}

demo

這是更好的，但：

#top { 
    width: 300px !important; 
} 
ul { 
    padding: 0 0 0 20px !important; 
    margin: 0 !important; 
    border: solid 1px orange; 
    height: auto; 
    overflow: visible; 
}

demo

來源

2010-02-05 21:46:19

謝謝。這很接近，但想法是完成的結果仍然在設置的容器寬度內水平滾動。 – Mario 2010-02-05 23:49:32

它們重疊，因爲每個<ul>元素被設置爲300像素的寬度，並且它也有一個left-padding它創建「踩」了一下。所以第一個列表水平從0到300px，而第二個嵌套列表從20px到320px，依此類推。

我不能完全肯定你想實現（也許你可以發佈樣機？），但也許對設置只最<ul>（即#top選擇器）的寬度會做你想要的效果。

來源

2010-02-05 21:47:08 DisgruntledGoat

你絕對是在正確的軌道上。我正在尋找替代的CSS來解決這個問題。 – Mario 2010-02-06 00:42:02

你嘗試過我發佈的內容嗎？即'#top {width：300px}'並移除通用'ul'選擇器上的'width'規則。 – DisgruntledGoat 2010-02-06 02:56:00

什麼CSS將防止這些嵌套列表項目的重疊？

回答

相關問題