왜 내 페이지가 오른쪽으로 넘치고 있습니까?

매튜 제임스 테일러 (Matthew James Taylor)의 Holy Grail 3 칼럼 액체 레이아웃을 변형했습니다. 내 Doctype이 XHTML 일 때 완벽하게 작동했습니다. 그러나 HTML5로 전환했을 때 오른쪽으로 넘치기 시작했습니다. 보이는 부분은 여전히 잘 보이지만 브라우저는 가로 스크롤 막대를 표시하고 페이지의 오른쪽에 초과 공백이 있습니다.왜 내 페이지가 오른쪽으로 넘치고 있습니까?

내 웹 사이트는 여기입니다 : Western Wake Farmers' Market | Link to CSS

어떻게 해결할 수 있습니까?

출처

2011-03-06 Jim Lamb

왜 그런 일이 일어 났는지 - 나는 잘 모르겠다. 네가 묻지 않으면 나는 그것을 보지 않을 것이다.

#header 안에있는 ul은 width: 100%과 (앞에서 설명한 @zerocrates대로) 패딩을 사용하여 너무 넓습니다.

어떻게 그것을 해결하기 위해 :

이 #header 내부 ul에서 width: 100%를 제거합니다.
어떻게 든 문제가있는 경우이를 수정하는 또 다른 방법은 overflow: hidden을 #header에 추가하는 것입니다.

출처

2011-03-06 22:23:34 thirtydot

도움 주셔서 감사합니다. 이러한 종류의 문제를 디버깅하는 방법에 대한 정보는 무엇입니까? 이 문제를 해결하는 데 도움이되는 도구가 있습니까? –

파이어 폭스 확장 기능과 함께 파이어 폭스를 사용하여이를 발견했습니다. 내가 문제가되는 'ul'을 발견 할 때까지 나는 요소의 나무를 더 내려다 보았다. [그것 위로 공중 선회했을 때 매우 넓다는 것을 알았다.] (http://i.imgur.com/3uprt.png), 그것은 'width : 100 %'를 가지고 있었고, 그래서 나는 그 규칙을 끄집어 냈다. – thirtydot

팁 주셔서 감사. 다음 번에는 레이아웃 문제가있을 때 확실히 적용 할 것입니다. –

#header ul 스타일은 왼쪽에 100 % 너비와 22 자의 패딩을 지정합니다.

덧씌우 기가 내용 너비에 적용되므로 ul 크기가 페이지 너비보다 커서 펼쳐 야합니다.

출처

2011-03-06 22:22:57

왜 내 페이지가 오른쪽으로 넘치고 있습니까?

답변

관련 문제