Я хочу иметь скрытый флажок, который не занимает места на экране.
Если у меня есть это:
<div id="divCheckbox" style="visibility: hidden">
Я не вижу флажок, но он по-прежнему создает новую строку.
Если у меня есть это:
<div id="divCheckbox" style="visibility: hidden; display:inline;">
он больше не создает новую строку, но занимает горизонтальное пространство на экране.
Есть ли способ иметь скрытый div, который не занимает места (вертикальный или горизонтальный?
Ответы:
использование
display:none;
visibility: hidden
скрывает элемент, но все равно занимает место в макете.display: none
полностью удаляет элемент из документа, он не занимает места.источник
<div id="divCheckbox" style="display: inline-block;">
inline-block
? Значением по умолчаниюdisplay
для div являетсяblock
!display: none
наdisplay: inline-block
или эквивалентный, чтобы отображаемый теперь div не занимал место и не перемещал мои другие элементы DOM?display: none
хотя прямо из HTML Однако любое использованиеdisplay
свойства переопределяет поведениеhidden
глобального атрибута.С момента выпуска HTML5 теперь можно просто:
Примечание. Это не поддерживается некоторыми старыми браузерами, особенно IE <11.
Документация по скрытым атрибутам ( MDN , W3C )
источник
Использование
style="display: none;"
. Кроме того, вам, вероятно, не нужно иметь DIV, достаточно просто установить стильdisplay: none
на флажок.источник
visibility: hidden
но это было пустое место.style="display: none;"
работал как маленькая прелесть :)В дополнение к ответу CMS вы можете рассмотреть возможность помещения стиля во внешнюю таблицу стилей и присвоения стиля идентификатору, например:
источник
Поскольку вы должны сосредоточиться на удобстве использования и общих чертах в CSS, а не использовать идентификатор для указания на конкретный элемент макета (который приводит к огромным или нескольким файлам CSS), вы, вероятно, должны вместо этого использовать истинный класс в связанном файле .css:
или для минималистов:
Теперь вы можете просто применить его через:
источник
Попробуйте использовать
<span>
для выделения небольших сегментов разметки для стилизации, не разбивая макет. Казалось бы, это более идиоматично, чем пытаться заставить себя<div>
не отображать себя - если на самом деле сам флажок не может быть стилизован так, как вы хотите.источник
Показать / скрыть щелчком мыши:
Источник: Здесь
источник
Чтобы флажок не занимал место, не удаляя его из DOM, используйте
hidden
.Чтобы флажок не занимал место, а также удалял его из DOM, используйте
display: none
.источник
Чтобы скрыть элемент визуально , но сохранить его в HTML, вы можете использовать:
или
Что может пойти не так
display:none
? Он полностью удаляет элемент из html, поэтому некоторые функции могут быть нарушены, если им нужно получить доступ к чему-то в скрытом элементе.источник
Это должно заставить элемент исчезнуть и не занимать места.
источник