HTML/CSS 导航列表元素在调整窗口大小时不调整大小

问题描述 投票：0回答：2

我一直在尝试让我的导航随窗口宽度调整大小，但是一旦我调整窗口大小时，动画元素就不会随之调整大小。我必须向右滚动才能看到左边的元素。

* {
  box-sizing: border-box;
  font-size: 100%;
  font-family: DM Sans;
  margin: 0;
  padding: 0;
}

@font-face {
font-display: swap;
font-family: 'DM Sans';
font-style: normal;
font-weight: 400;
src: url('fonts/dm-sans-v11-latin-regular.eot'); /* IE9 Compat Modes */
src: url('fonts/dm-sans-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('fonts/dm-sans-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
     url('fonts/dm-sans-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
     url('fonts/dm-sans-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
     url('fonts/dm-sans-v11-latin-regular.svg#DMSans') format('svg'); /* Legacy iOS */
}



@media screen and (min-width: 40em) {
  #container > * {
    margin-bottom: 0;
  }
  #container {
    display: grid; 
        flex-direction: column;
    min-width: 100%;
    grid-auto-columns: repeat(minmax(200px, 1fr), 1);
    grid-template-rows: 90px 1fr auto;
    grid-template-columns: 1fr 200px;
    gap: 2px;
    grid-template-areas: 
          "header header header"
          "main main side"
          "footer footer footer";
     height: 100vh;
        }
  #footer, #header {
    grid-column: 1 / -1;
  }
  #inhalt {
    grid-column: 1 / 3;
  }

  #navigation {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }
}


@media screen and (max-width: 35em) {
  nav {
    flex-direction: column;
    align-items: flex-start;
  }
  
  nav ul {
    flex-direction: column;
  }
  
  nav li {
    margin: 10px 0;
  }
}

@media screen and (max-width: 768px) {
  #navigation {
    justify-content: center;
  }
}

#container {
margin-left: auto;
margin-right: auto;
max-width: 75rem;
width: 100%;
}

#container > *{
  background-color: #fff;
  padding: 1em;
  border-radius: 20px;
  margin-left: 10px;
  margin-right: 10px;
}

#inhalt, #sidebar{
  background-color: #e6dddd7a;
  border: 1px solid #0000001e;
}

header {
  display: grid;
  justify-items: center;
}

header li {
  list-style: none;
  display: inline-block;
  padding: 0 20px;
  font-size: 1em;
  padding-left:70px;
  padding-right:70px;
  }
    
  header a {
  text-decoration: none;
  color: #000;
  transition: 400ms;
  justify-content: space-between;
  margin: -15px;
  }
    
  header a:hover {
  text-decoration: none;
  }


nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav a {
  text-decoration: none;
  font-size: 1.3rem;
}

nav a:hover {
  text-decoration: none;
  background-color: #FF5841;
}

.active {
  background-color: #FF5841;
}

article{
font-size: 1rem;
word-spacing: 8px;
margin-bottom: 3%;
color: #000;
padding-left: 20px;
padding-right: 20px;

}

.article-headline{
  display: flex;
  font-size: 1.2rem;
  justify-content: space-between;
  border-bottom: solid 1px #0000001e;
  padding: 10px;
  margin-bottom: 3%;
}

.article-headline .count{
  margin-left: 70%;
}

#sidebar li, a {
  list-style: none;
  padding: 10px;
  color:#000;
  text-decoration: none;
  transition: 400ms ease;
  display: flex;
  text-align: center;
  justify-content: center;
  }
  
  #sidebar a:hover{
  text-decoration: none;
  background-color: #FF5841;

  }
  
  #sidebar h2{
  text-align: center;
  padding-bottom: 30px;
  }

  #sidebar a{
    width: 100%;
  }
  

footer{
display: flex;
font-size: 1rem;
justify-content: space-between;

}

footer img {
width: 4em;
height: 2em;
margin: 10px;
}

footer a, #hidebar, span {
text-decoration: none;
padding-top: 10px;
color:#000
}

footer #hidebar:hover, a:hover{
text-decoration: underline;
cursor:pointer;
}

button {
  background-color:#FF5841;
  cursor:pointer;
    font-size:1.1rem;
  padding: 5px;
  
}

button:hover{
  background: #de7f71;
}
<!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>test</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="icon" type="image/x-icon" href="images/icon.ico">
</head>
<body>
<div id="container">
    <header id="header">

      <div id="navigation">
        <nav>
          <ul>
            <li><a class="active" href="#">asdasdasdasd</a></li>
            <li><a href="#">asdasdasdasd</a></li>
            <li><a href="#">asdasdasd</a></li>
            <li><a href="#">Wasasdasddao</a></li>
            <li><a href="#">asdasd</a></li>
            <li><a href="#">asdasdasd</a></li>
          </ul>
        </nav>
      </div>
    </header>


  <main id="inhalt">
    <div class="article-headline">
      <h1>Test</h1>
      <h1>22.02.2023</h1>
    </div>

      
      <article id="content">
      <p>test</p>

      <p>test</p>        
      <p>test</p>        
      <p>test</p>    
    </article>
  </main>

  <div id="sidebar">
    <h2>something</h2>
    <ul>
      <li><a class="active" href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
      <li><a href="#">test</a></li>
    </ul>
  </div>
      
  <footer id="footer">
    <span id="hidebar" href="#">deactivate sidebar</span>
    <a href="#">test</a>
  </footer>
</div>
</body>
</html>

我会很感激任何帮助

我试过使用之前使用过的解决方案，比如实现宽度 100%；对于没有任何运气的导航栏或标题。

html css navigation width responsive
2个回答
1
投票

Zach的回答很好

一些更友好的观察，你需要清理你的代码，你有很多不一致之处。举几个例子：

你在一个块中多次覆盖你的代码。 你的网格设置也不一致：

#container {
    display: grid; 
    min-width: 100%;
    grid-auto-columns: repeat(minmax(200px, 1fr), 1);
    grid-template-rows: 90px 1fr auto;
    grid-template-columns: 1fr 200px;
    gap: 2px;
    grid-template-areas: 
          "header header header"
          "main main side"
          "footer footer footer";
     height: 100vh;
        }

#container {
  margin-left: auto;
  margin-right: auto;
  max-width: 75rem;
  width: 100%;
}

#container>* {
  background-color: #fff;
  padding: 1em;
  border-radius: 20px;
  margin-left: 10px;
  margin-right: 10px;
}

你得到了带有 flex-direction 的显示网格

#container {
    display: grid;
    flex-direction: column;
    min-width: 100%;
    grid-auto-columns: repeat(minmax(200px, 1fr), 1);
    grid-template-rows: 90px 1fr auto;
    grid-template-columns: 1fr 200px;
    gap: 2px;
    grid-template-areas: "header header header" "main main side" "footer footer footer";
    height: 100vh;
  }
0
投票

您的链接项上有大量填充：

header li {
  padding-left: 70px;
  padding-right: 70px;
}

如果你希望你的导航在没有足够的宽度容纳所有填充时缩小，请使用 flexbox 而不是网格。
您也可以简单地减少填充。我不得不去掉很多不必要的代码来解决你的问题。下次尝试将其提炼成最小可重现示例

* {
  box-sizing: border-box;
  font-size: 100%;
  margin: 0;
  padding: 0;
}

@media screen and (min-width: 40em) {
  #container>* {
    margin-bottom: 0;
  }
  #container {
    display: grid;
    flex-direction: column;
    min-width: 100%;
    grid-auto-columns: repeat(minmax(200px, 1fr), 1);
    grid-template-rows: 90px 1fr auto;
    grid-template-columns: 1fr 200px;
    gap: 2px;
    grid-template-areas: "header header header" "main main side" "footer footer footer";
    height: 100vh;
  }
  #header {
    grid-column: 1 / -1;
  }
  #navigation {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }
}

@media screen and (max-width: 35em) {
  nav {
    flex-direction: column;
    align-items: flex-start;
  }
  nav ul {
    flex-direction: column;
  }
  nav li {
    margin: 10px 0;
  }
}

@media screen and (max-width: 768px) {
  #navigation {
    justify-content: center;
  }
}

#container {
  margin-left: auto;
  margin-right: auto;
  max-width: 75rem;
  width: 100%;
}

#container>* {
  background-color: #fff;
  padding: 1em;
  border-radius: 20px;
  margin-left: 10px;
  margin-right: 10px;
}

header {
  display: grid;
  justify-items: center;
}

header li {
  list-style: none;
  display: inline-block;
  padding: 0 20px;
  font-size: 1em;
}

header a {
  text-decoration: none;
  color: #000;
  transition: 400ms;
  justify-content: space-between;
  margin: -15px;
}

header a:hover {
  text-decoration: none;
}

nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav a {
  text-decoration: none;
  font-size: 1.3rem;
}

nav a:hover {
  text-decoration: none;
  background-color: #FF5841;
}

.active {
  background-color: #FF5841;
}
<div id="container">
  <header id="header">
    <div id="navigation">
      <nav>
        <ul>
          <li><a class="active" href="#">asdasdasdasd</a></li>
          <li><a href="#">asdasdasdasd</a></li>
          <li><a href="#">asdasdasd</a></li>
          <li><a href="#">Wasasdasddao</a></li>
          <li><a href="#">asdasd</a></li>
          <li><a href="#">asdasdasd</a></li>
        </ul>
      </nav>
    </div>
  </header>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.