tab縮排縮影片縮址縮短

調整列表縮排- CSS

文章推薦指數： 80 %
投票人數：10人

原文: Consistent List Indentation. 使用CSS 來協助縮排列表看來簡單實則卻否，原因很簡單- 各大瀏覽器其實作方式不盡相同。

一個很大的原因來自於對 ... SkiptomaincontentSkiptosearchSkiptoselectlanguage給開發者的網頁技術文件CSSCSSListsandCounters調整列表縮排ArticleActions正體中文(繁體)ThispagewastranslatedfromEnglishbythecommunity.LearnmoreandjointheMDNWebDocscommunity.調整列表縮排原文: ConsistentListIndentation  使用CSS來協助縮排列表看來簡單實則卻否，原因很簡單-各大瀏覽器其實作方式不盡相同。

一個很大的原因來自於對距離的掌握，但這很讓人喪志，因為瀏覽器沒有一致的排版方式。

舉例來說，倘若你宣告一個list沒有 leftmargin，在IE中他可以被移動，但在Gecko-based的瀏覽器中他們將很固執的固定在那。

 為了更徹底明白為何有這種情況發生，了解列表是怎樣被創造的至關重要。

創建列表 首先，我們考慮一個最簡單的listitem。

他並不屬於任何一個list中，並且也沒有項目符號(意思就是沒有bullet)。

如Figure1所示：  這裡的紅點線框是list內容的外框。

在這裡的例子中，listitem並沒有設定padding或borders。

現在我們加上兩個listitem，如圖二：  接著我們加上parentelement，這裡我們以unorderedlist(i.e., 

    )為例。

    根據 CSSboxmodel，這些listitem都會被包裹在parentelement的範圍中。

    如下圖中的紫色外框，他包住了三個listitem的外圍：  然後我們加上listitemmarkers。

    因為我們用的是unorderedlist，因此使用預設的filled-circle"bullets"。

    結果如下：  好的，現在看出來了，這些marker在 
      空間之外。

      但更重要的是，這些marker其實是在
    • 之外！這個結果使得listitem看起來像是附加在marker之上。

       結論出來了，在瀏覽器(除了windows下的IE)處理列表時，marker是在
    •  element的外頭。

      所以這些個對listitem的設定並不會對marker造成影響，影響的是其後附加的內容。

      二次縮排 所以我們該如何設定其外觀？現在讓我們來分析一下下們這組設定： ul,li{margin-left:0;padding-left:0;}  當套用了這組設定，marker將會很悲劇的落到畫面之外。

       為了避免這種慘劇發生，瀏覽器有三種不同的實作方式來避免： 幫每一個
    •  element設定leftmargin 幫 
         element設定 leftmargin 幫 
           element設定一些leftpadding  事後檢視，沒有瀏覽器採用第一種作法。

          WindowsandMacintosh上的 InternetExplorer和Opera採用第二種作法。

          Gecko相關的瀏覽器則使用第三種設計。

           現在讓我們來瞧瞧後兩種作法的差異。

          在InternetExplorer及Opera中，
            element為了縮排需要被設定了 40pixel的 leftmargin。

            假如我們此時在 
               element設定背景顏色，其結果如下：  Gecko則不太一樣，他為 
                 element 設定了40pixel的left padding。

                因此造成上圖的程式碼會在Gecko中變成下圖：  從結果來說，marker都很好的附著在 
              •  element之前並未消失。

                唯一的不同點是發生在你替 
                   element設定背景顏色時。

                  不變的是... 現在我們知道，若你希望在Gecko,InternetExplorer和Opera都有一樣的list外觀， 
                     element的 leftmargin和leftpadding都要設定。

                    你大可不必理會 
                  •  的設定。

                     假如你想要有Netscape6.x的預設風格，寫法如下： ul{margin-left:0;padding-left:40px;}  若你對Explorer/Opera風格有興趣，可以寫成： ul{margin-left:40px;padding-left:0;}  當然啦，你可以不用pixel來表示長度，取而代之的可以使用類似 1.25em 的寫法。

                    現在若你想要重設列表，而不打算有任何縮排，可以這樣寫： ul{margin-left:0;padding-left:0;}  請注意，這樣的寫法將造成bullet被扔在整個列表及其parentelement之外。

                    當你在 body中這樣寫，很顯然的你的 bullet將不會出現在你的視窗內。

                    結論 在這篇文章中我們並未指出哪個瀏覽器對list縮排的處理是正確的。

                    之所以會有不同的排版方式只是因為他們採用了不同的排版方法。

                    確定你設定了list的leftpadding和leftmargin，這樣你比較能寫出跨瀏覽器良好縮排程式。

                    建議 在你調整列表的縮排時，務必確定你設定了padding和margin。

                    關於此文件 Author(s):EricA.Meyer,NetscapeCommunications LastUpdatedDate:Published30Aug2002 CopyrightInformation:Copyright©2001-2003Netscape.Allrightsreserved. Note:ThisreprintedarticlewasoriginallypartoftheDevEdgesite. Foundaproblemwiththispage?EditonGitHubSourceonGitHubReportaproblemwiththiscontentonGitHubWanttofixtheproblemyourself?SeeourContributionguide.Lastmodified:2022年6月22日,byMDNcontributors

請為這篇文章評分？

延伸文章資訊