정렬되지 않은 목록 항목은 들여 쓰여집니다.

안녕하세요. 화면이 넓어 질수록 들여 쓰기 된 정렬 된 목록이 있습니다. 목록 항목의 각 계층은 이전보다 더 들여 쓰기가됩니다.정렬되지 않은 목록 항목은 들여 쓰여집니다.

누구든지 도움을 줄 수 있습니다. Heres 내 코드

<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; 
}

나는 왼쪽 내용 p의 글꼴 크기로 범위를 좁혔습니다.

도움을 주실 수있는 분들께 감사드립니다.

출처

2012-08-04 Wesley Skeen

그 요소의 CSS는 무엇입니까? * margin- left 또는 padding-left가 * percent *로 정의 된 값으로 어딘가에 숨겨져 있습니까? – amon

각 목록 항목을 대상으로하는 지형지 물 클래스의 여백 .features li { 여백 : 0.625em 2.5em 1.25em 0; } –

여백을 고정하여 수정했습니다. 오른쪽 방향 amon에 대한 포인트 주셔서 감사합니다. –

원하지 않는 동작은 높이가 약간 더 큰 부동 이미지로 인해 발생할 수 있습니다.

를 추가해보십시오 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

정렬되지 않은 목록 항목은 들여 쓰여집니다.

답변

관련 문제