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 the release of HTML5 one can now simply do:

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

Note: This is not supported by some old browsers, most notably IE < 11.

Hidden Attribute Documentation (MDN,W3C)

Answer 2

In addition to CMS´ answer you may want to consider putting the style in an external stylesheet and assign the style to the id, like this:

#divCheckbox {
display: none;
}

Answer 3

Use style="display: none;". Also, you probably don't need to have the DIV, just setting the style to display: none on the checkbox would probably be sufficient.

Answer 4

To prevent the checkbox from taking up any space without removing it from the DOM, use hidden.

<div hidden id="divCheckbox">

To prevent the checkbox from taking up any space and also removing it from the DOM, use display: none.

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

Answer 5

Consider using <span> to isolate small segments of markup to be styled without breaking up layout. This would seem to be more idiomatic than trying to force a <div> not to display itself--if in fact the checkbox itself cannot be styled in the way you want.

Answer 6

To hide the element visually, but keep it in the html, you can use:

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

or

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

What may go wrong with display:none? It removes the element completely from the html, so some functionalities may be broken if they need to access something in the hidden element.