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

mxg2im7a 于 2023-03-05 发布在其他

关注(0)|答案(2)|浏览(140)

我一直试图让我的导航调整窗口的宽度，但只要我调整窗口的动画元素不调整大小与它。我必须滚动到右边，以便让我看到离开了元素。

* {
  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%;对于导航栏或标题没有任何运气。

css

来源：https://stackoverflow.com/questions/75610307/html-css-navigation-list-elements-dont-resize-when-window-is-resized

2条答案

按热度按时间

sirbozc51#

扎克的回答很好。
一些更友好的观察，你需要清理你的代码，你有很多不一致的地方。几个例子：
在一个块中多次覆盖代码。网格设置也不一致：

#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;
}

你得到了显示网格与弯曲方向

#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）回复(0）举报 2023-03-05

t2a7ltrp2#

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

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

如果你想让你的导航在没有足够的宽度来放置所有的填充时缩小，使用flexbox而不是grid。
你也可以简单地减少填充。我不得不去掉很多不必要的代码来解决你的问题。下次试着把它提炼成Minimum Reproducible Example
x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-03-05

我来回答

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

2条答案

相关问题

热门标签

最新问答