꼬리말의 패딩으로 부모 div 너비로 확장됩니다.

텍스트가있는 제 웹 페이지에 꼬리말이 있습니다. 내가 그것에 padding-left 속성을 추가하려고하면 꼬리말의 너비는 둘러싸는 부모 div 요소 위로 확장되며이 문제는 오페라에서만 발생하며 크롬이나 파이어 폭스 또는 IE에서는 발생하지 않습니다. 문제를 해결하려면 어떻게해야합니까 ?? 바닥 글꼬리말의 패딩으로 부모 div 너비로 확장됩니다.

CSS :

footer { 
color: #FFFFFF; 
background-color: #3399CC; 
padding-top: 12px; 
padding-bottom: 12px; 
width: 100%; 
float: left; 
}

출처

2013-09-08 Aditya Vikas Devarapalli

당신이 바닥 글 태그 내부 사업부를 취함으로써이 문제를 해결하고 사업부 상식을의

<style> 
footer { 
    color: #FFFFFF; 
    background-color: #3399CC; 
    width: 100%; 
    float: left;  
} 
.footer { 
    padding-top: 12px; 
    padding-bottom: 12px; 
    padding-left:10px; 
} 
</style> 
<footer> 
<div class="footer">hello this is footer</div> 
</footer>

출처

2013-09-08 06:44:34

에 패딩을 적용 할 수 있습니다. "패딩"과 "너비 100 %"를 추가하면 이이됩니다. "채우기"또는 "너비 100 %"를 제거하면 더 이상 문제가 없음을 알 수 있습니다.

부모 - 바닥 글-과 바닥 글 사이에 div 태그를 추가하고 패딩 왼쪽과 같이, 그 새로운 div에 추가 : 내부에 별도의 블록 레벨 요소를 추가하는

<div id="parentOfFooter" style="background-color: #00ff00;"> 
    <div id="paddingLeftProblemSolver" style="background-color: #ff8800; padding-left:50px;"> 
     <div id="myfooter" style="color: #FFFFFF; background-color: #3399CC; padding-top: 12px; padding-bottom: 12px; width: 100%; float: left;"> 
      i'm a footer 
     </div> 
    </div> 
</div>

출처

2013-09-08 07:09:38 evilReiko

thanq을 ... 이미 이전에 시도했는데 오페라 브라우저에서 바닥 글의 너비에 문제가 발생합니다. [바닥 글이 전체 너비로 확장되지 않습니다.] –

을하는 대신 꼬리말, border-box로 설정된 값으로 CSS3 상자 크기 조정 속성을 시도해야합니다. 다음 바닥 글의 정의는 아마도 당신을 위해 문제를 해결해야합니다

footer 
{ 
    color: #FFFFFF; 
    background-color: #3399CC; 
    padding-top: 12px; 
    padding-bottom: 12px; 
    width: 100%; 
    float: left; 
    box-sizing: border-box; /* prefix accordingly */ 
}

이 짧은 소개를 읽은 다음 링크를 방문하십시오 : 귀하의 제안이 "100 %의 폭"을 제거하는 http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

출처

2013-09-12 15:54:06 DisinterestedObserver

꼬리말의 패딩으로 부모 div 너비로 확장됩니다.

답변

관련 문제