时间戳

首页 > 解决方案 > HTML/CSS @media Query : 该行不断消失

html - HTML/CSS @media Query : 该行不断消失

问题描述

我无法理解学习 CSS 的部分。如果我减小浏览器大小，这条线就会消失。我不知道为什么。我不能防止线路消失吗？我不知道它为什么会消失。请帮我。

.container {
  position:relative;
  border: solid 1px black;
}

@media screen and (min-width:600px) {
 nav {
  float: left;
  width: 25%;
  border: solid 1px skyblue;
}

section {
  margin-left:25%;
  border: solid 1px orange;
} 
}

@media screen and (max-width: 599px) {
  nav li {
    display: inline;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div class="container">
    <nav>
      <ul>
        <li>Home</li>
        <li>Taco Menu</li>
        <li>Draft List</li>
        <li>Hours</li>
      </ul>
    </nav>
    <section>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero odit, dolorem dolore, porro repudiandae animi iusto, quia quae autem voluptate minus ducimus cupiditate ipsum! Fugit assumenda error veritatis pariatur expedita.</p>
    </section>
    <section>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad fugiat, nulla officiis quibusdam iusto non. Sint suscipit pariatur aspernatur amet iusto aperiam est nesciunt ullam. Labore sit, ut ipsum neque.</p>
    </section>
  </div>
</body>

</html>

标签： htmlcss

解决方案

只需将borderCSS 与媒体查询分开编写，以便媒体查询样式不会覆盖它。浏览下面的代码或试试这个JSFiddle。

CSS 代码-

.container {
  position: relative;
  border: solid 1px black;
}

nav {
  border: solid 1px skyblue;
}

section {
  border: solid 1px orange;
}

@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}

@media screen and (max-width: 599px) {
  nav li {
    display: inline;
  }
}

推荐阅读