Кнопка странно не кликабельна
Я пытаюсь создать веб-приложение, но столкнулся с проблемой.
Большинство интерфейсов приложения состоят из множества кнопок, и я столкнулся со странным явлением, когда я не могу нажать на некоторые из кнопок (отсутствует анимация нажатия и onclick() не запускается).
Я заметил, что там, где есть несколько кнопок, расположенных друг над другом, можно нажимать только на последнюю строку кнопок.
Я создал минимальный, полный и проверяемый пример.
<html>
<body>
<div style = "padding-top: 20%;" id = "div1">
<button>
Button 1
</button><br />
<button>
Button 2
</button>
</div>
<script>
document.getElementById("div1").style.display = "initial";
</script>
</body>
</html>Дополнительные наблюдения/примечания:
Когда вы переходите к выбору элемента из меню разработчика, вы не можете выбрать неисправные кнопки.
Я использую Фаерфокс. Я получаю аналогичную проблему с моим приложением в Chrome, но кнопки, которые работают неправильно, отличаются от тех, которые ломаются в Firefox.
Я пытаюсь создать одностраничное веб-приложение, скрывая и показывая различные элементы <div> (разные экраны), устанавливая display: none; и display: initial; соответственно. Это причина для <script>. Есть ли лучший способ сделать это?
да, @ComputerLocus прав. Такое поведение обусловлено стилем.
Это из-за отображения inline (по умолчанию initial будет inline для свойства отображения) в сочетании с верхним отступом.
@MarkBaijens Может быть, сделать это ответом, поскольку у вас, кажется, есть хорошее объяснение проблемы?
Странно, я скопировал код и запустил, все работает.
@ComputerLocus Это скорее наблюдение, чем ответ. Может быть, кто-то может опубликовать ответ, почему это происходит. Я мало знаю о css и спецификации для этого.
@MarkBaijens Я думаю, что может быть полезно узнать, что они пытаются сделать с помощью initial, чтобы, возможно, можно было предложить альтернативные решения, которые облегчат проблему.
Код работает для меня, со встроенным css или без него
@MonikaMangal, ты проверил это в хроме?
да пробовал в хроме. @АлокМали
Это может помочь: maxdesign.com.au/articles/inline
@KoshVery изначально установил отображение на встроенный, а не на браузер по умолчанию
@KoshVery Он устанавливает не значение по умолчанию для браузера/элемента, а значение по умолчанию для спецификации, которое является встроенным для свойства отображения.
@TemaniAfif, @MarkBaijens, спасибо, я неправильно понял спецификацию %)). По умолчанию для display prop точно inline.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
display: initial; эквивалентно display: inline; в вашем случае.
Затем к каждой строке контента применяется padding-top, в результате чего вторая строка перекрывает первую строку. Это легче увидеть, если вы добавите фон в содержащий div.
#div1 {
padding-top: 15px;
display: initial;
background: #f00;
}<div id = "div1">
<button>
Button 1
</button>
<br>
<button>
Button 2
</button>
</div>на самом деле это не связано с оформлением блока, а с тем фактом, что высота линейного блока определяется только высотой строки, а все остальное (отступы, границы, поля и т. д.) будет просто переполнение
Я думал, что отступ был применен ко всему элементу <div>. Как заставить это работать таким образом?
@TemaniAfif Да, мой плохой, я удалю эту часть ответа.
@IssaChanzi любой дисплей, кроме inline (initial)
@IssaChanzi есть несколько способов, самый простой из которых — использовать вместо этого display: inline-block;.
<html>
<body>
<div style = "padding-top: 20%;">
<button>
Button 1
</button><br />
<button>
Button 2
</button>
</div>
</body>
</html>
Это из-за добавления стиля
initial. Есть ли причина хотеть этого?