侧边导航栏将文本推到下方

Question

我正在尝试为我网站的产品部分创建侧边导航栏。每当我创建导航栏时，文本都会被推到它下面。有什么想法吗？

body {
  margin: 0;
}

.sidenav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 15%;
  background-color: #f1f1f1;
  position: relative;
  height: 75%;
  overflow: auto;
}

.sidenav li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

<section>
  <section class="sidenav">
    <ul>
      <li><a href="index.html"><b>HOME</b></a></li>
      <li><a href="about.html">ABOUT</a></li>
      <li><a href="shop.html">SHOP</a></li>
      <li><a href="contact.html">CONTACT</a></li>
    </ul>
  </section>
  <div style="margin-left:15%; margin-top:-10% padding:1px 16px;">
    <h2>Products</h2>
    <h3>Here is where the product name will be</h3>
    <p>Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information</p>
  </div>
</section>

Answer 1

您可以像这样用 flexbox 修复。但我建议您在 html 和 css

中进行重构

body {
  margin: 0;
}

.main {
  display: flex;
 }
 
.sidenav {
    width: 25%;
}

.sidenav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
  position: relative;
  height: 75%;
  overflow: auto;
}

.sidenav li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

.divRight {
  width: 75%;
  display: flex;
  flex-flow: column;
}

<section class='main'>
    <section class="sidenav">
      <ul>
        <li><a href="index.html"><b>HOME</b></a></li>
        <li><a href="about.html">ABOUT</a></li>
        <li><a href="shop.html">SHOP</a></li>
        <li><a href="contact.html">CONTACT</a></li>
      </ul>
    </section>

    <div class='divRight'>
      <h2>Products</h2>
      <h3>Here is where the product name will be</h3>
      <p>Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information</p>
    </div>
  </section>

Answer 2

我用 aside class="sidenav" 换掉了 section class="sidenav"。此外，您应该在父级上定义宽度并使用 display: flex;。然后，您还可以通过给它们一个 width 来拆分其中的子元素。

body {
  margin: 0;
}

.sidenav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #f1f1f1;
  position: relative;
  height: 100%;
  overflow: auto;
}

.sidenav li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

.sidenav {
  width: 15%;
}

section > div {
  width: 85%;
}

section.wrapper {
  display: flex;
  width: 100%;
}

<section class="wrapper">
  <aside class="sidenav">
    <ul>
      <li><a href="index.html"><b>HOME</b></a></li>
      <li><a href="about.html">ABOUT</a></li>
      <li><a href="shop.html">SHOP</a></li>
      <li><a href="contact.html">CONTACT</a></li>
    </ul>
  </aside>
  <div>
    <h2>Products</h2>
    <h3>Here is where the product name will be</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
</section>

Answer 3

body {
  margin: 0;
}

main {
  display: inline-block;
  max-width: 400px;
  padding: 1px 16px;
}

.contain-really-long-text {
  inline-size: 300px;
  overflow-wrap: break-word;
}

.sidenav {
  height: 100%;
  width: 20%;
  display: inline-block;
  vertical-align: top;
}

.sidenav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
  position: relative;
}

.sidenav li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

<section>
  <nav class="sidenav">
    <ul>
      <li><a href="index.html"><b>HOME</b></a></li>
      <li><a href="about.html">ABOUT</a></li>
      <li><a href="shop.html">SHOP</a></li>
      <li><a href="contact.html">CONTACT</a></li>
    </ul>
  </nav>
  <main>
    <h2>Products</h2>
    <h3>Here is where the product name will be</h3>
    <p class="contain-really-long-text"> Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information</p>
  </main>
</section>

Answer 4

首先你应该把 css 放在 css 文件中，而不是 html:

<div style="margin-left:15%; margin-top:-10% padding:1px 16px;">

其次，注意 div 和部分，它们有一个默认值“display:block”

您应该在放置内容的第二个 div 后面加上一个 class。

.Sidenav 和第二 div put

display: inline-block

一个错误是将 ul 的值设置为 75%，但是，75% 是什么？你应该先设置他的身高parent

.sidenav {
min-height: 100vh;
width: 15%;
}

.Sidenav ul {
width: 100%;
height: 75%;
}

这样，ul 的 100% 宽度意味着整个屏幕的 15%，因为他的 parent 有 15% 宽度。

您可以将第二个宽度设置为 85% div

使用弹性框或网格可以更轻松地完成所有这些操作，但您需要先了解这些概念。

侧边导航栏将文本推到下方

Side-navbar pushing text underneath

html

css

sidenav