修复侧导航栏

Question

 header {font-weight: bold; font-size: 50px;} article {font-size: 30px;} p {font-size: 20px;} #nav-bar {position: fixed; min-width: 290px; top: 0px; left: 0px; width: 300px; height: 100%; border-right: solid; border-right-color: currentcolor; border-color: rgba(0, 22, 22, 0.4); }

 <main id ="main-doc"> <section class="main-section" id = "introductions"> <header id ="introductions"> Introductions </header> <article> This is words and stuff</article> <p> This is the P1 text</p> <p> This is the P2 text</p> <li>This is the 1st list<li> <code>This is code one</code> </section> <section class="main-section" id ="article1"> <header id ="article1">Article1</header> <article> This is the first article's text</article> <p>This is the P3 text</p> <p>This is the P4 text</p> <li>This is the 2nd list</li> <code>This is code two</code> </section> <section class = "main-section" id = "article2"> <header id = "article2"> Article2</header> <article>This is the seconds article</article> <p>This is the P5 text</p> <p>This is the P6 text</p> <li>This is the 3rd list</li> <code>This is code three</code> </section> <section class = "main-section" id = "article3"> <header id = "article3">Article3</header> <article>This is the third article text</article> <p>This is P7 text</p> <p>This is the P8 text</p> <li>This is the 4th list</li> <code>This is code 4</code> </section> <section class = "main-section" id = "article4"> <header id = "article4">Article4</header> <article>This is the fourth article tect</article> <p>This is the P9 text</p> <p>This is the P10 text</p> <li>This is the 5th list</li> <code>This is code 5</code> </section> <nav id ="nav-bar"> <a href="#introductions" id="introductions">Introductions</a> <a href= "#article1" id="article1">Article1</a> <a href="#article2" id="article2">Article2</a> <a href="#article3" id="article3">Article3</a> <a href="#article4" id ="article4">Article4</a> </nav>

您好，我正在开发一个免费代码营项目，我需要一些有关侧面导航栏的帮助。 我需要帮助将主页移动到导航栏边框的另一侧（而不是导航栏和主页重叠。我还需要导航栏的列表元素垂直显示而不是水平显示。任何帮助都会受到赞赏。

我将评论页面的链接

Answer 1

Flexbox 是 go 放置内容的方式。

 #container{ display:flex; justify-content:flex-start; } #nav-bar{ display:flex; flex-direction:column; margin-right:10vw; }

 <div id='container'> <nav id ="nav-bar"> <a href="#introductions" id="introductions">Introductions</a> <a href= "#article1" id="article1">Article1</a> <a href="#article2" id="article2">Article2</a> <a href="#article3" id="article3">Article3</a> <a href="#article4" id ="article4">Article4</a> </nav> <main id ="main-doc"> <section class="main-section" id = "introductions"> <header id ="introductions"> Introductions </header> <article> This is words and stuff</article> <p> This is the P1 text</p> <p> This is the P2 text</p> <li>This is the 1st list<li> <code>This is code one</code> </section> <section class="main-section" id ="article1"> <header id ="article1">Article1</header> <article> This is the first article's text</article> <p>This is the P3 text</p> <p>This is the P4 text</p> <li>This is the 2nd list</li> <code>This is code two</code> </section> <section class = "main-section" id = "article2"> <header id = "article2"> Article2</header> <article>This is the seconds article</article> <p>This is the P5 text</p> <p>This is the P6 text</p> <li>This is the 3rd list</li> <code>This is code three</code> </section> <section class = "main-section" id = "article3"> <header id = "article3">Article3</header> <article>This is the third article text</article> <p>This is P7 text</p> <p>This is the P8 text</p> <li>This is the 4th list</li> <code>This is code 4</code> </section> <section class = "main-section" id = "article4"> <header id = "article4">Article4</header> <article>This is the fourth article tect</article> <p>This is the P9 text</p> <p>This is the P10 text</p> <li>This is the 5th list</li> <code>This is code 5</code> </section> </main> </div>

Answer 2

你可以使用弹性盒子。

#main-doc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 80%;
    margin-left: 20%;
}