css 如何在主内容的左侧创建侧菜单？

ygya80vv 于 2023-05-19 发布在其他

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

我在一个网站上工作，我把所有东西都 Package 在这个代码块中，它把所有东西都很好地设置在网页的中间，宽度为780px。我确实计划让它的响应速度更快，但现在这正是我希望我的网站在大型显示器上的外观。由于宽度有足够的空间，一个小菜单，我可以把主要内容的最左边。我希望这个菜单包括像用户的名字，工作职位和其他基本信息的东西。一个例子是LinkedIn的页面在您登录后的外观。当我尝试包含代码时，它将自己设置在我的主要内容的顶部，而不是左侧。

.content {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 100%;
  min-height: 100vh;
  padding: 0 1rem;
  width: 780px;
}

.sidenav {
  border: 1px solid black;
}

<main class="content">
  <div class="sidenav">
    ...
  </div>
  <div class="main__home">
    <form action="" method="POST">
      ...
    </form>
  </div>
</main>

我所尝试的

我试过使用flex，并将justified-content和align-items都设置为left，但这只是拉伸了屏幕的宽度。我也试过将float设置为left，但这也破坏了宽度，使所有东西都变小了。我还将sidenav代码移出了content块，但所做的只是将宽度扩展到整个屏幕。

css

来源：https://stackoverflow.com/questions/76252928/how-can-i-create-a-side-menu-to-the-left-of-my-main-content

2条答案

按热度按时间

ubof19bj1#

您可以将display: flex;添加到.content以使它们并排。要解决大小问题，您可以使用flex-basis: 150px;（或其他值）设置.sidenav宽度，然后将flex-grow: 1;添加到.main__home，它将填充宽度的其余部分。
下面是完整的CSS：

.content {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 100%;
  min-height: 100vh;
  padding: 0 1rem;
  width: 780px;
  display: flex;
}

.sidenav {
  border: 1px solid black;
  flex-basis: 100px;
}

.main__home {
  flex-grow: 1;
}

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

jhiyze9q2#

如果你想做的只是在主内容的左边挂一个菜单，那么在容器上使用position: relative创建一个新的containing block，然后在侧栏上使用position: absolute。使用right: 100%将其一直推到块的左侧（这听起来违反直觉，但它将sidenav的左手边缘一直推到容器之外）。
对于小于总宽度的屏幕大小，请使用媒体查询更改其显示方式。

.content {
  position: relative; /* define a new containing block */
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 100%;
  min-height: 100vh;
  padding: 0 1rem;
  width: 780px;
  border: 1px solid gray;
  border-radius: 0.25rem;
}

.main__home {
  background: lightgray;
}

.sidenav {
  position: absolute; /* added this */
  right: 100%; /* push the right hand edge all the way to the left edge of the container */
  
  /* this is all just prettification */
  border: 1px solid black;
  padding: 0.5rem;
  border-radius: 0.25rem;
  display: flex;
  flex-direction:column;
  gap: 0.5rem;
  background: #333;
  color: white;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<main class="content">
  <div class="sidenav">
     <i class="fa-solid fa-house"></i>
    <i class="fa-solid fa-magnifying-glass"></i>
    <i class="fa-solid fa-circle-info"></i>
  </div>
  <div class="main__home">
    <form action="" method="POST">
      main
    </form>
  </div>
</main>

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

我来回答

css 如何在主内容的左侧创建侧菜单？

2条答案

相关问题

热门标签

最新问答