無序列表項目縮進

大家好我有一個有序列表，隨着屏幕越來越寬，越來越縮進。列表項的每一層比前一個更加縮進。無序列表項目縮進

任何人都可以幫忙。下面是我的代碼

<div id="left-content"> 

     <div id="product-header"> 

      <h1 class="red-text">Gmail</h1> 
      <h2>A google approach to email</h2> 

     </div> 

     <p>Gmail is built on the idea that email can be more intuitive, efficient, and useful. And maybe even fun. After all, Gmail has:</p> 

     <ol class="features"> 
      <li> 
       <img src="../IMAGES/google-storage.png" alt="google-storage"> 
       <p class="features-header">Lots of space</p> 
       <p>Over 10275.525924 megabytes (and counting) of free storage.</p> 
      </li> 
      <li> 
       <img src="../IMAGES/google-cancel.png" alt="google-cancel"> 
       <p class="features-header">Less spam</p> 
       <p>Keep unwanted messages out of your inbox.</p> 
      </li> 
      <li> 
       <img src="../IMAGES/google-mobile.gif" alt="google-mobile"> 
       <p class="features-header">Mobile access</p> 
       <p>Get Gmail on your mobile phone.<a href="#">Learn more</a></p> 
      </li> 
     </ol> 

    </div><!-- "left-content --> 




#product-header{ 
    margin-bottom: 1.225em; 
} 

#main-content{ 
    padding: 2em; 
    width: 80%; 
    margin: 0 auto; 
} 

#left-content{ 
    width: 45%; 
    min-width: 18.75em; 
} 

#left-content p{ 
    font-size: .8125em; 
} 

.red-text{ 
    color: red; 
} 

.features li{ 
    margin: 0.625em 2.5em 1.25em 0; 
} 

.features img{ 
    float: left; 
    margin: 0 1em 1em 0; 
} 

.features-header{ 
    font-size: : .875em; 
    margin-bottom: .3em; 
}

我已經縮小到＃left-content p的字體大小。

感謝任何人都可以提供幫助。

來源

2012-08-04 Wesley Skeen

什麼是對這些元素的CSS？是否有一個'margin-left'或'padding-left'隱藏在某個地方，它們的值在* percents *中定義？ – amon 2012-08-04 22:06:48

這些保留在以每個列表項目爲目標的要素類上的特徵。特徵li {0} {0} {0} {0} {margin}：0.625em 2.5em 1.25em 0; } – 2012-08-04 22:07:55

我通過修復邊距來修復它。感謝在正確的方向阿蒙點 – 2012-08-04 22:10:25

不需要的行爲可能是由於浮動圖像的高度稍大於文本。

嘗試增加clear: both到.features li：

.features li{ 
    clear: both; 
    margin: 0.625em 2.5em 1.25em 0; 
}

您可以在這裏找到一個非常緊湊的例子：http://jsfiddle.net/urE23/

來源

2012-08-04 22:16:48 Amberlamps

無序列表項目縮進

回答

相關問題