我有一些元素,当屏幕尺寸小于 900px 时,我想将它们全部放在 block 中
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<img style="width:30px;height:auto;" src="/escapologinphpto.jpeg">
<button class="dropbtn" onclick="myFunction()">Dropdown
<!-- <i class="fa fa-caret-down"></i> -->
</button>
<div class="dropdown-content" id="myDropdown">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
这是到目前为止的工作链接 https://jsfiddle.net/153qkyoh/
最佳答案
您可以使用 CSS 媒体查询来实现这一点。但是,您需要了解某些设备和屏幕类型的各种断点。 我们将 992px 作为屏幕断点,最接近 900px。
@media screen and ( max-width: 992px) {
a {
display: block;
}
}
或者如果链接元素的显示属性被继承,您可以添加 - !important 关键字以忽略与其相关的所有继承样式。
@media screen and ( max-width: 992px) {
a {
display: block !important;
}
}
关于html - 将内容放在 block 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47701828/