이 코드를 다시 작성하십시오 : 클릭 가능한 div

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

  •  07-07-2019
  •  | 
  •  

문제

나는 이것을 바꾸고 싶다 :

<a href='foo'> 
    <div> Moo </div>
</a>

표준을 준수하려면 (인라인 요소에 블록 요소가 없어야 함). 내비게이션을 위해 DIV에 JavaScript를 배선하는 것은 해킹과 접근성을 저하시키는 것처럼 보입니다.이 경우, 내 요구 사항은 고정 차원 링크의 2 세트 세트에 대한 것이므로 위의 비 호환 코드는 스타일을 적용한 후에 완벽하게 작동합니다.

도 "a { display:block; }"검증을 우회하는 법적 방법?

도움이 되었습니까?

해결책

사용하지 않는 이유는 무엇입니까? u003Cspan> a보다는 u003Cdiv> 그리고 설정 디스플레이 : 블록 두 요소 모두?

또한 후자의 질문에 답하기 위해 : 나는 추가를 믿지 않는다. 디스플레이 : 블록; 당신의 앵커에 따라 유효성 검사를 전달합니다. 유효성 검사기는 사용자에게 페이지를 제시하는 방법이 아닌 (x) HTML 규칙을 따르는 지 확인합니다.

다른 팁

당신은 다음을 고려하고 싶을 수도 있습니다 div 외부 a 외부 테두리를 클릭하는 것이 중요하지 않은 한 디스플레이 목적으로 만 사용되는 경우. 이것 중 하나 :

<div class="dbl_border_links"><a href="blah">Blah text</a></div>

아니면 이거:

<a class="dbl_border_links" href="blah"><span>Blah text</span></a>

작동하며 다음과 같은 것을 사용할 수 있습니다.

<style>
  .dbl_border_links, .dbl_border_links>* {
    display: block;
    border: 1px solid;
    padding: 1px;
  }
  .dbl_border_links {
    border-color: red;
  }
  .dbl_border_links > * {
    border-color: blue;
  }
</style>

스타일을 지정합니다. 개인적으로 나는 함께 갈 것입니다 div 포함 a 그러나 어느 접근 방식도 작동합니다.

나는 보통 고려한다 <a > 이 목적을위한 특별한 경우가 되십시오. 당신은 그것을 거의 무엇이든 적용 할 수 있어야합니다. 그것은 하이퍼 텍스트의 요점의 일종입니다 (<tr > 좋은 예를 염두에 두십시오). 그러나 당신이 내가 이해하는 어딘가에 검증기를 통과해야한다면.

JavaScript를 사용할 수 있습니까? onclick div의 핸들러와 앵커를 완전히 제거 하시겠습니까?

첫째, 앵커 디스플레이를 제공하는 데는 아무런 문제가 없습니다 : 블록; 나는 그것이 사람들이 CSS에서하는 가장 일반적인 일 중 하나이며 완벽하게 표준을 준수한다고 말하고 있습니다. 둘째, HTML 요소에서 이중 테두리를 달성하는 방법에는 여러 가지가 있습니다. 우선 "개요"속성을 확인하십시오.

http://webdesign.about.com/od/advancedcss/a/outline_style.htm

물론, 이것은 더 현대적인 브라우저에서만 작동하지만 개요가 페이지의 공간을 차지하지 않으므로 우아하게 저하되어야합니다. 링크의 내용이 이미지 u003Ca>인 경우 이중 테두리의 인상을 만들기 위해 작은 패딩과 배경색뿐만 아니라 일반 테두리 (다른 색상)를 제공 할 수 있습니다. 또는 이미지에 자신의 테두리를주십시오. 물론 당신은 또한 당신의 원래 아이디어의 선을 따라 무언가를 할 수 있지만, 다른 방법으로 html을 둥지하고 단순히 각 요소에 다른 테두리를 할당 할 수 있습니다. 또는 링크 내부의 인라인 요소 (A와 같은 A u003Cspan>u003Cem>또는 무언가)를 사용할 수 있습니다. (예, 이것은 또한 유효합니다!). 행복한 코딩!u003C/em>u003C/span>u003C/a>

내가 당신의 의도를 올바르게 이해한다면, 이미 언급했듯이 앵커 외부의 div를 배치하고 같은 프레젠테이션을 얻으려면 앵커를 만들어야합니다. width:100%;height:100%. 크로스 브라우저 마일리지는 다를 수 있습니다. 또한, 당신은 div를 완전히 버리고 앵커를 줄 수 있습니다. display:block;

정확히 무엇을하려고합니까?

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