줄 바꿈이나 가로 공간을 만들지 않는 숨겨진 div를 어떻게 만드나요?

화면의 공간을 차지하지 않는 숨겨진 확인란을 원합니다.

내가 이것을 가지고 있다면 :

<div id="divCheckbox" style="visibility: hidden">

확인란이 보이지 않지만 여전히 새 줄을 만듭니다.

내가 이것을 가지고 있다면 :

<div id="divCheckbox" style="visibility: hidden; display:inline;">

더 이상 새 줄을 만들지 않지만 화면에서 가로 공간을 차지합니다.

공간을 차지하지 않는 (수직 또는 수평) 숨겨진 div를 가질 수 있습니까?

사용하다 display:none;

<div id="divCheckbox" style="display: none;">

• visibility: hidden 요소를 숨기지 만 레이아웃에서 여전히 공간을 차지합니다.

• display: none 문서에서 요소를 완전히 제거하고 공간을 차지하지 않습니다.

HTML5 가 출시 되었으므로 이제 간단하게 수행 할 수 있습니다.

<div hidden>This div is hidden</div>

참고 : 일부 오래된 브라우저, 특히 IE <11 에서는 지원 되지 않습니다 .

숨겨진 속성 문서 ( MDN , W3C )

사용하십시오 style="display: none;". 또한 DIV를 가질 필요가 없으며 display: none확인란 에서 스타일을 설정하는 것만 으로도 충분합니다.

CMS의 답변 외에도 외부 스타일 시트에 스타일을 배치하고 다음과 같이 스타일을 ID에 할당하는 것이 좋습니다.

#divCheckbox {
display: none;
}

CSS의 유용성과 일반성에 중점을 두어야하기 때문에 id를 사용하여 특정 레이아웃 요소 (거대한 또는 여러 CSS 파일을 생성 함)를 가리 키지 말고 대신 연결된 .css 파일에서 실제 클래스를 사용해야합니다.

.hidden {
visibility: hidden;
display: none;
}

또는 미니멀리스트를 위해 :

.hidden {
display: none;
}

이제 다음을 통해 간단히 적용 할 수 있습니다.

<div class="hidden"> content </div>

<span>레이아웃을 해치지 않고 작은 마크 업 세그먼트를 스타일링 할 수 있도록 사용하십시오 . <div>실제로 확인란 자체를 원하는 방식으로 스타일을 지정할 수없는 경우 표시하지 않도록 강제하는 것보다 관용적 인 것처럼 보입니다 .

마우스 클릭으로 표시 / 숨기기 :

<script language="javascript">

    function toggle() {

        var ele = document.getElementById("toggleText");
        var text = document.getElementById("displayText");

        if (ele.style.display == "block") {

            ele.style.display = "none";
            text.innerHTML = "show";
        }
        else {

            ele.style.display = "block";
            text.innerHTML = "hide";
        }
    }
</script>

<a id="displayText" href="javascript:toggle();">show</a> <== click Here

<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>

출처 : 여기

확인란을 DOM에서 제거 하지 않고 공간을 차지하지 않게하려면을 사용하십시오 hidden.

<div hidden id="divCheckbox">

어떤 공간을 복용에서 확인란을 방지하기 위해 또한 사용의 DOM에서 제거 display: none.

<div id="divCheckbox" style="display:none">

요소를 시각적으로 숨기고 html로 유지 하려면 다음을 사용할 수 있습니다.

<div style='visibility:hidden; overflow:hidden; height:0; width:0;'>
  [content]
</div>

또는

<div style='visibility:hidden; overflow:hidden; position:absolute;'>
  [content]
</div>

무엇이 잘못 될 수 display:none있습니까? HTML에서 요소를 완전히 제거하므로 숨겨진 요소의 무언가에 액세스 해야하는 경우 일부 기능이 작동하지 않을 수 있습니다.

display: none;

이렇게하면 요소가 사라지고 공간을 차지하지 않아야합니다.