HTML : 왜 요소가 너무 많은 너비를 차지합니까?

나는 커스텀 워드 프레스 테마에 대해 작업 해왔다. 이것은 우리가 협회 (내 경우에는 극장 그룹)를 위해 홈페이지를 재 설계해야하는 학교 프로젝트의 일부이다.HTML : 왜 요소가 너무 많은 너비를 차지합니까?

나는 4 페이지의 이미지를 추가하기 위해 wordpress 메뉴를 사용자 정의했습니다. 그러나이 이미지가있는 <nav> 요소는 CSS에서 width: auto을 사용하고 있지만 예상보다 많은 너비를 차지합니다. 이 때문에 margin-right: -133px;을 사용하여 <nav>을 재배치했습니다.이 문제를 해결할 수있는 방법은 아닙니다.

상단 배너에 대한 HTML은 다음과 같습니다

<header role="banner" id="branding"> 
    <a href="http://dev.zomis.net/talat/"> 
     <img alt="" src="http://dev.zomis.net/talat/wp-content/themes/talat/talat-logo.png" id="header_logotype"> 
    </a> 
    <nav role="navigation" id="access"> 
     <a href="http://dev.zomis.net/talat/forening"> 
      <img src="http://dev.zomis.net/talat/wp-content/themes/talat/talat_meny_forening_gray.jpg" id="menu_image_forening" class="menu_image"> 
     </a> 
     <a href="http://dev.zomis.net/talat/scen"> 
      <img src="http://dev.zomis.net/talat/wp-content/themes/talat/talat_meny_scen.jpg" id="menu_image_scen" class="menu_image"> 
     </a> 
     <a href="http://dev.zomis.net/talat/film"> 
      <img src="http://dev.zomis.net/talat/wp-content/themes/talat/talat_meny_film_gray.jpg" id="menu_image_film" class="menu_image"> 
     </a> 
     <a href="http://dev.zomis.net/talat/natverk"> 
      <img src="http://dev.zomis.net/talat/wp-content/themes/talat/talat_meny_natverk_gray.jpg" id="menu_image_natverk" class="menu_image"> 
     </a> 
     <div class="menu-talat-container"><ul class="menu" id="menu-talat"></ul></div> 
    </nav> 
</header>

쉽게 문제를 보려면 (제거 주석 코드의 전체 무리와 함께), 나는 붉은 색으로 전체 header 요소를 표시하고, nav했습니다 노란색으로.

저는 파이어 버그를 많이 사용하여이 문제를 일으키는 원인을 알았지 만 알아낼 수 없습니다. 나는이 <header> 안에있는 빈 <div class="menu-talat-container">을 의심해 왔지만, 그 부분을 방화범으로 여러 번 제거하고 차이를 보지 못했습니다.

는 페이지에서 볼 수

: http://dev.zomis.net/talat/scen

어떻게 보이는지의 이미지와 내가 텍스트 표시가 이해하지 못하는 부분 "왜 오른쪽으로 튀어 나와이 노란색 부분이다?" Why is this yellow part sticking out to the right?

margin-right 속성을 제거 할 때

는 질문은 "왜 화상이 여기에 없다?"대신이된다 : Why is there no image in the marked area?

출처

2012-05-23 Simon Forsberg

http://dev.zomis.net/talat/scen은 귀하의 예처럼 보이지 않습니다. – lanzz

@lanzz 나는 크롬을 들여다 보았다. 스크린 샷은 파이어 폭스에서 나온 것입니다. 어쨌든 text-align : right를 사용하여 시작하고 #access의 마진 오른쪽 133px를 제거하십시오. – Gijoey

@lanzz 어떤 브라우저를 사용하십니까? 나를 위해 그것은 여전히 노란색 부분이 튀어 나와있는 첫 번째 이미지로 보인다. Firefox 및 Chrome에서만 확인했습니다. –

이 일어나고있는 이유는 이미지 '폭이 15 %로 설정되어 있다는 점이다. 전체적으로 컨테이너 폭의 60 % 만 차지합니다. 수동으로 설정 한 여백을 추가하면 여전히 100 % 이하가됩니다. 그래서 #access div는 단지 그 공간을 추가합니다.

이미지의 너비를 백분율로 설정하는 것은 좋지 않습니다. 나는 그들이 원하는 공간에 맞게 이미지를 편집하고 CSS의 이미지 너비와 높이를 설정하지 말 것을 제안합니다.

출처

2012-05-23 14:14:57 vlasits

'#access div '는 크기를 설정할 때 css로 수정 한 크기를 고려했지만, 분명히 완전히 잘못되었다고 생각했습니다. –

왜 이미지가 너무 작 으면 전체 공간을 차지합니까?

id='access'nav에서 margin-right: -133 속성을 삭제하고 사진의 크기를 변경하면됩니다. 크기를 #access img (현재 15 %이지만 22 %로 설정할 수 있음)으로 변경하십시오.

이미지의 크기가 조정되고 높아지기 때문에 헤더 요소의 크기를 조정하거나 이미지를자를 수 있습니다.

nav에 이미지를 한 개 더 추가하고 왼쪽/오른쪽 여백 및 패딩을 #access img에 추가 할 수도 있습니다.

출처

2012-05-23 14:17:40 toniedzwiedz

HTML : 왜 요소가 너무 많은 너비를 차지합니까?

답변

관련 문제