How do you create a hidden div that doesn't create a line break or horizontal space?

Question

I want to have a hidden checkbox that doesn\'t take up any space on the screen.

If I have this:

                      

              相关标签:
       
      

Answer 1

Since you should focus on usability and generalities in CSS, rather than use an id to point to a specific layout element (which results in huge or multiple css files) you should probably instead use a true class in your linked .css file:

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

or for the minimalist:

.hidden {
display: none;
}

Now you can simply apply it via:

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

Answer 2

Show / hide by mouse click:

<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>

Source: Here

Answer 3

Use display:none;

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

• visibility: hidden hides the element, but it still takes up space in the layout.

• display: none removes the element completely from the document, it doesn't take up any space.

Answer 4

display: none;

This should make the element disappear and not take up any space.