侧导航条在下方推送文本

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

我用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 2

您可以像这样使用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 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和section，它们有一个默认值"显示：块"；

您应该将一个类放在第二个div中，放置内容。

Sidenav和第二个div放入

display: inline-block

一个错误是把75%的值加在ul上，但是，75%是什么？你应该先设定他父母的身高

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

通过这种方式，ul的100%宽度意味着整个屏幕的15%，因为他的父母witch有15%的宽度。

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

更容易用flex box或grid来完成所有这些，但您需要首先理解这些概念。