Как создать скрытый div, который не создает разрыв строки или горизонтальное пространство?

354

Я хочу иметь скрытый флажок, который не занимает места на экране.

Если у меня есть это:

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

Я не вижу флажок, но он по-прежнему создает новую строку.

Если у меня есть это:

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

он больше не создает новую строку, но занимает горизонтальное пространство на экране.

Есть ли способ иметь скрытый div, который не занимает места (вертикальный или горизонтальный?

Лиора
источник
Есть ли смысл в таком div?
Jonno_FTW
6
@Jonno: это обычно используется в AJAX. Скажем, у вас есть список предметов с раскрытыми треугольниками. Вы хотите, чтобы детали или поддерево появлялись, когда пользователь щелкает треугольник раскрытия. Поэтому вы должны поместить <div id = "theID" style = "display: none;"> туда, куда должны идти подробности. Затем, когда пользователь щелкает треугольник, вы перемещаете треугольник в положение «на полпути» (указывая на юго-восток) и запускаете AJAX-запрос для заполнения <div>. Когда AJAX-запрос завершается, вы поворачиваете треугольник на юг и удаляете «display: none;» из стиля <div>. Библиотека script.aculo.us делает это много.
Майк ДеСимоне

Ответы:

717

использование display:none;

<div id="divCheckbox" style="display: none;">
  • visibility: hidden скрывает элемент, но все равно занимает место в макете.

  • display: none полностью удаляет элемент из документа, он не занимает места.

CMS
источник
42
чтобы показать div снова (на всякий случай, если кому-то нужно, как я) -<div id="divCheckbox" style="display: inline-block;">
anujin
14
@anujin: почему inline-block? Значением по умолчанию displayдля div является block!
МММ
Есть ли способ сделать обратное? Чтобы изменить div с display: noneна display: inline-blockили эквивалентный, чтобы отображаемый теперь div не занимал место и не перемещал мои другие элементы DOM?
bpromas
1
возможно, стоит обновить ответ, включив в него глобальный скрытый атрибут HTML, который доступен начиная с HTML5.1, что в основном то же самое, что сказать, display: noneхотя прямо из HTML Однако любое использование displayсвойства переопределяет поведение hiddenглобального атрибута.
Мариус Мученику
54

С момента выпуска HTML5 теперь можно просто:

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

Примечание. Это не поддерживается некоторыми старыми браузерами, особенно IE <11.

Документация по скрытым атрибутам ( MDN , W3C )

C_b
источник
1
Это более корректно с точки зрения семантики, чем скрытие с помощью CSS, оно лучше для доступности и поддерживается всеми основными браузерами. Это должен быть принятый ответ в 2020 году.
Робин Метрал
29

Использование style="display: none;". Кроме того, вам, вероятно, не нужно иметь DIV, достаточно просто установить стиль display: noneна флажок.

tvanfosson
источник
Мне нужно скрыть свое сообщение о загрузке страницы, и я хотел показать его снова при нажатии кнопки. Пробовал, visibility: hiddenно это было пустое место. style="display: none;"работал как маленькая прелесть :)
sohaiby
8

В дополнение к ответу CMS вы можете рассмотреть возможность помещения стиля во внешнюю таблицу стилей и присвоения стиля идентификатору, например:

#divCheckbox {
display: none;
}
Зета Два
источник
+1, это действительно хорошее предложение, но как показать только один флажок, не влияя на видимость всех других флажков?
Оваис Куреши
1
@dotNetSoldier Старый вопрос, но здесь должен быть ответ. У вас есть класс css, называемый invis, и вы добавляете / удаляете его из флажка или делите по id с помощью JS.
DanielST
8

Поскольку вы должны сосредоточиться на удобстве использования и общих чертах в CSS, а не использовать идентификатор для указания на конкретный элемент макета (который приводит к огромным или нескольким файлам CSS), вы, вероятно, должны вместо этого использовать истинный класс в связанном файле .css:

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

или для минималистов:

.hidden {
display: none;
}

Теперь вы можете просто применить его через:

<div class="hidden"> content </div>
Дейв
источник
код выглядит намного чище! Я предпочитаю, чтобы занятия проходили в стиле inline
Harry Cho
5

Попробуйте использовать <span>для выделения небольших сегментов разметки для стилизации, не разбивая макет. Казалось бы, это более идиоматично, чем пытаться заставить себя <div>не отображать себя - если на самом деле сам флажок не может быть стилизован так, как вы хотите.

Рич Чурчер
источник
4

Показать / скрыть щелчком мыши:

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

Источник: Здесь

Махди Джазини
источник
4

Чтобы флажок не занимал место, не удаляя его из DOM, используйте hidden.

<div hidden id="divCheckbox">

Чтобы флажок не занимал место, а также удалял его из DOM, используйте display: none.

<div id="divCheckbox" style="display:none">
smac89
источник
3

Чтобы скрыть элемент визуально , но сохранить его в 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, поэтому некоторые функции могут быть нарушены, если им нужно получить доступ к чему-то в скрытом элементе.

THN
источник
0

display: none;

Это должно заставить элемент исчезнуть и не занимать места.

Хосе Луис Расмуссен Гарсия
источник
Спасибо людям, которые прокомментировали форматирование моего ответа.
Хосе Луис Расмуссен Гарсия