html - 将内容放在 block 中

Question

我有一些元素，当屏幕尺寸小于 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/

Answer 1

您可以使用 CSS 媒体查询来实现这一点。但是，您需要了解某些设备和屏幕类型的各种断点。我们将 992px 作为屏幕断点，最接近 900px。

@media screen and ( max-width: 992px) {
    a {
        display: block;
    }
}

或者如果链接元素的显示属性被继承，您可以添加 - !important 关键字以忽略与其相关的所有继承样式。

@media screen and ( max-width: 992px) {
    a {
        display: block !important;
    }
}