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 是放置内容的方式。

#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

你可以使用 flex-box。

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

修复侧边导航栏

2 个答案: