내 웹 페이지에 작은 공간이 계속 표시되는 이유는 무엇입니까?

StackOverflow https://stackoverflow.com/questions/134683

  •  02-07-2019
  •  | 
  •  

문제

이것은 어리석은 질문 일지 모르지만이를 수행하는 더 나은 방법이 있다면 배우고 싶습니다.

나는 최근에 작은 공간이 내 HTML 페이지의 렌더링 된 버전에 나타나는 것을 포함하여 몇 차례에 걸쳐 실행했습니다. 직관적으로 나는 텍스트 나 엔티티 외부에서 페이지의 HTML의 형식이 중요하지 않지만 분명히 그렇게하기 때문에 이것들이 없어서는 안된다고 생각합니다.

내가 언급하는 것은 이것입니다 - 고객의 사이트가 어떻게 보이기를 원하는지에 대한 Photoshop 파일이 있습니다. 그들은 기본적 으로이 파일의 이미지에 완벽하게 보이기를 원합니다.

페이지의 장소 중 하나는 메뉴 표시 줄을 요구합니다. 각각은 호버링에서 변화하는 비트를 사용하고 하이퍼 링크 등을 사용합니다. Photoshop 파일에서 이것은 하나의 긴 막대이므로 저렴하고 쉬운 방법은이 작업을 수행하는 것입니다. 해당 세그먼트를 여러 이미지로 분할 한 다음 파일에 서로 옆에 놓습니다.

그래서 본능적으로 나는 그것을처럼 배치합니다 (더 많은 것이 있지만 이것은 요점입니다)

<a href="page1.html">
  <img src="image1.png" />
</a>
<a href="page2.html">
  <img src="image2.png" />
</a>
<a href="page3.html">
  <img src="image3.png" />
</a>

기타 등등.

문제는 이미지가 그들 사이 에이 작은 공간을 가지고 있다는 것입니다. 클라이언트는이 물건을 픽셀-완벽하게 원하기 때문에 용납 할 수 없습니다 (그리고 그것은 단지 평범한 것처럼 보입니다).

올바르게 렌더링하는 한 가지 방법은 이미지 사이의 캐리지 리턴을 제거하는 것입니다.

<a href="page1.html">
  <img src="image1.png" />
</a>
<a href="page2.html">
  <img src="image2.png" />
</a>
<a href="page3.html">
  <img src="image3.png" />
</a>

이미지가 서로 대항하여 (원하는 효과) 라인을 엄청나게 길게 만들고 코드를 유지하기가 더 어려워집니다 (여기서 랩핑하고 단순화 된 버전입니다. 실제 버전에는 더 긴 파일 이름과 JavaScript가 있습니다. 호버링을하기 위해 뿌려졌다).

이것이 일어나지 않아야하는 것처럼 보이지만 HTML의 캐리지 리턴이 작은 빈 공간으로 렌더링되는 것처럼 보입니다. 그리고 이것은 모든 브라우저에서 발생합니다.

위의 두 스 니펫이 똑같이 렌더링해야한다고 생각하는 것이 옳고 그름입니까? 그리고 내가 잘못하고있는 일이 있습니까? 잘못된 인코딩으로 파일을 저장합니까? 이 링크를 모두 완벽하게 배치 된 CSS 요소로 만들어야합니까?

도움이 되었습니까?

해결책

공백 (캐리지 리턴 포함)은 일반적으로 모든 브라우저에서 공간으로 렌더링됩니다.

요소를 차례로 놓아야하지만 트릭을 사용할 수 있습니다.

<a href="page1.html"><img src="image1.png" 
/></a><a href="page2.html"><img src="image2.png" 
/></a><a href="page3.html"><img src="image3.png" 
/></a>

이것은 또한 약간 추악 해 보이지만 여전히 한 줄보다 낫습니다. 형식을 변경할 수 있지만 아이디어는 요소 사이에 마차 반환을 추가하는 것입니다.

다른 팁

이것이 당신의 페이지에 충분히 일반인지는 모르겠지만, 당신은이 특정 수업을 할 수 있습니다. ㅏ 태그를 붙이고 왼쪽으로 떠 다니면 HTML이 어떻게 형식화되어 있든 서로 묶을 것입니다. 

<style>
    a.together {
        float:left;
    }
</style>

<a class='together' href="page1.html"><img src="image1.png" /></a>
<a class='together' href="page2.html"><img src="image2.png" /></a>
<a class='together' href="page3.html"><img src="image3.png" /></a>

이는 HTML 사양의 일부입니다. 공백은 마크 업에 있으므로 문서의 일부로 간주됩니다.

서식을 싫어하기 때문에 당신이 가진 유일한 옵션은 HTML 태그를 깨는 것입니다.

  <a href="..."><img src=".." /></a
  ><a href="..."><img src=".." /></a
  ><a href="..."><img src=".." /></a

제 생각에는 바람직하지 않거나 JavaScript를 통해 또는 템플릿 시스템 및 동적 HTML을 사용하여 HTML을 동적으로 만듭니다.

그 이유는 간단합니다. HTML에서 화이트 우주는 한 번만 중요합니다. 반복 된 공백은 무시되며 첫 번째 만 표시됩니다.

이를 피하는 유일한 신뢰할 수있는 방법은 요소 사이에 공백을 두지 않음으로써했던 것처럼.

테이블 기반 레이아웃이 현재보다 덜 아웃되면 소스 코드의 별도 라인에있는 동안 제로 국경, 제로 패딩 테이블을 사용하여 요소를 정렬 할 수 있습니다.

내가 이것을 다루는 방법은 순서가없는 목록을 사용하고 각 이미지/링크를 항목으로 만드는 것입니다. 그런 다음 CSS를 사용하여 각 항목을 인라인으로 표시하고 왼쪽으로 뜬다.

이것은 당신에게 훨씬 더 많은 유연성을 제공하고 마크 업을 매우 읽기 쉽게 만듭니다.

브라우저가 캐리지 리턴을 공간으로 취급하므로 위에서 설명한 동작은 사실입니다. 그것을 고치려면 다음과 같이 스타일을 지정할 수 있습니다.

a { display: block; float: left; }

위의 규칙은 모든 링크에 적용되므로 선택기를 특정 요소로만 좁힐 수 있습니다.

#nav a { display: block; float: left; }

웹 사이트에서 탭 인터페이스를 수행하려는 경우 제대로하기 위해 큰 고통을 겪으면 가치가 있습니다. CSS 탭 구현의 훌륭한 예가있는 많은 웹 사이트가 있습니다. 그들 중 하나를 사용하는 것을 고려하십시오.

이 하나 CSS+JavaScript/Ajax 탭이 많이 있습니다. 또는 참조 이 간단한 CSS 예제 (일부 스타일). 마지막으로,이 사실을 확인하십시오 탭 생성기.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top