css 显示：使用媒体查询时块不工作

yzxexxkh  于 2022-12-24  发布在  其他
关注(0)|答案(3)|浏览(188)

我正在做一个使用媒体查询的任务，当我试图使我的网站的导航栏垂直于较小的屏幕时遇到了一个问题。
我原以为每个导航链接都占一行，但它们都留在一行上。

nav {
  position: fixed;
  z-index: 1000;
  top: 0px;
  text-align: center;
  background-color: #eedfd4;
  margin: auto;
  width: 99%;
  padding: 5px;
  border-radius: 7px;
}

nav li {
  list-style-type: none;
  width: 10%;
  text-align: center;
  border-radius: 5px;
  margin: 8px;
  padding: 6px;
  background-color: #D5BDAF;
  transition: background-color 1s;
}

nav li:hover {
  background-color: #d6b19b;
}

nav a {
  text-decoration: none;
  color: #876244;
}

@media screen and (max-width:759px) {
  fig {
    width: 100%;
  }
  footer {
    width: 100%;
  }
  nav li {
    display: block;
  }
  .himg {
    display: none;
  }
}

@media screen and (min-width:760px) {
  body {
    background-color: #cab9afc1;
  }
}
<nav>
  <ul>
    <li><a href=../index/index.html>Homepage</a></li>
    <li><a href=../about/about.html>About Us</a></li>
    <li><a href=../locations/locations.html>Locations</a></li>
    <li><a href=../recommended/recommended.html>Reccomended</a></li>
    <li><a href=../apply/apply.html>Apply</a></li>
    <li><a href=../contact/contact.html>Contact Us</a></li>
  </ul>
</nav>
css

3条答案

按热度按时间
hjqgdpho

hjqgdpho1#

希望这对你有帮助。

nav li {
    list-style-type: none;
    width: 10%;
    text-align: center;
    border-radius: 5px;
    margin: 8px;
    padding: 6px;
    background-color: #D5BDAF;
    transition: background-color 1s;
    display: inline;
}

@media screen and (max-width:759px) {
    nav li {
        display: block;
    }
}
赞(0）分享  回复(0）举报  2022-12-24
ifsvaxew

ifsvaxew2#

如果使用显示：flex，您可以控制元素在媒体查询中显示为行还是列。请参阅下面的注解示例：

/* added this to even up the right margin on the li items at low screen sizes */
* {
box-sizing:border-box;
}

nav {
  position: fixed;
  z-index: 1000;
  top: 0px;
  text-align: center;
  background-color: #eedfd4;
  margin: auto;
  width: 99%;
  padding: 5px;
  border-radius: 7px;
}

/* added this to make the container a flex box and removed the padding-left that appears on all ul items */
nav ul {
  display: flex;
  padding-left:0;
}

nav li {
  list-style-type: none;
  /* removed this --> width:10% as it makes the text overflow the li element */
  text-align: center;
  border-radius: 5px;
  margin: 8px;
  padding: 6px;
  background-color: #D5BDAF;
  transition: background-color 1s;
}

nav li:hover {
  background-color: #d6b19b;
}

nav a {
  text-decoration: none;
  color: #876244;
}

@media screen and (max-width:759px) {
  fig {
    width: 100%;
  }
  footer {
    width: 100%;
  }
  
  /* added this, stacks each li element on top of each other. The default is 'row' */
  nav ul {
    flex-direction: column;
  }
  .himg {
    display: none;
  }
}

@media screen and (min-width:760px) {
  body {
    background-color: #cab9afc1;
  }
}
<nav>
  <ul>
    <li><a href=../index/index.html>Homepage</a></li>
    <li><a href=../about/about.html>About Us</a></li>
    <li><a href=../locations/locations.html>Locations</a></li>
    <li><a href=../recommended/recommended.html>Reccomended</a></li>
    <li><a href=../apply/apply.html>Apply</a></li>
    <li><a href=../contact/contact.html>Contact Us</a></li>
  </ul>
</nav>
赞(0）分享  回复(0）举报  2022-12-24
myzjeezk

myzjeezk3#

一个完整的解决方案，为您使用flexbox具有良好的响应：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object</title>
    <!-- GOOGLE MATERIAL ICONS FONT -->
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=swap" rel="stylesheet" />
<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    outline: none;
    font-family: 'Poppins', 'system-ui', 'sans-serif';
    font-weight: 300;
}
::-webkit-scrollbar {
    width: 5px;
}
::-webkit-scrollbar-track {
    background: #e2e2e2; 
}
::-webkit-scrollbar-thumb {
    background: #9a9a9a; 
}
::-webkit-scrollbar-thumb:hover {
    background: #b6b6b6; 
}
body {
    margin: 0;
}
a {
    min-width: fit-content;
    font-weight: 500;
    color: white;
}
/* Whole body */
#wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
/* Navigation flex (set in #wrapper) height size to auto */
#wrapper > nav {
    max-width: 100vw;
    flex: 0 0 auto;
    padding: 0 10px;
    background: black;
    overflow-y: scroll;
    overflow-x: hidden;
}
/* Main Content flex (set in #wrapper) height size to auto (to fullfil page) GROWING in a flexbox */
#wrapper > section {
    flex: 1 0 auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
/* Controls navigation direction (row , column) */
#wrapper > nav > ul {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
}
/* Desnecessary Styling */
#wrapper > nav > ul > li {
    min-width: fit-content;
    padding: 10px;
    display: inline-flex;
    align-items: center;
    gap: 20px;
    border-radius: 100%;
    background: #ffffff96;
}
#wrapper > nav > ul > li a {
    display: none;
}
/* TOOGLE DEVICES */
@media screen and (min-width:760px) {
    body {
    background-color: #cab9afc1;
    }
    #wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    }
    #wrapper > nav {
    padding: 0 !important;
    margin: 10px;
    background: transparent !important;
    overflow-y: hidden !important;
    overflow-x: scroll !important;
    }
    #wrapper > nav > ul {
    flex-direction: row;
    gap: 8px !important;
    }
    #wrapper > nav > ul > li {
    border-radius: 0 !important;
    background: black !important;
    }
    #wrapper > nav > ul > li a {
    display: block !important;
    }
    ._icon {
    font-size: 18px !important;
    color: white !important;
    }
}
._icon {
    font-size: 22px;
    padding: 8px;
    color: black;
}
</style>
</head>
<body>
    <div id="wrapper">
        <nav>
            <ul>
              <li><span class="_icon material-symbols-outlined">&#xe88a;</span><a href=../index/index.html>Homepage</a></li>
              <li><span class="_icon material-symbols-outlined">&#xf8ea;</span><a href=../about/about.html>About Us</a></li>
              <li><span class="_icon material-symbols-outlined">&#xe55b;</span><a href=../locations/locations.html>Locations</a></li>
              <li><span class="_icon material-symbols-outlined">&#xe55a;</span><a href=../recommended/recommended.html>Reccomended</a></li>
              <li><span class="_icon material-symbols-outlined">&#xe174;</span><a href=../apply/apply.html>Apply</a></li>
              <li><span class="_icon material-symbols-outlined">&#xe649;</span><a href=../contact/contact.html>Contact Us</a></li>
            </ul>
        </nav>
        <section>SECTION</section>
    </div>
</body>
</html>
赞(0）分享  回复(0）举报  2022-12-24
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com