时间戳

首页 > 解决方案 > 如何在已包含单词的标题中添加导航栏

html - 如何在已包含单词的标题中添加导航栏

问题描述

如果您复制此代码，例如在 notepadd++ 中并用 chrome 打开它，您可以看到我已经开始构建的网站。我想在 h2 中添加一个导航栏。但是我已经在那里添加了一个名为“Elektrotechnik”的词。如何在 H2 框的右侧添加一个包含其他三个单词的导航栏？

enter code here
<!DOCTYPE HTML>
<html>

<head>
    
    <meta charset="UTF-8">
    
    <link rel="Stylesheet"
    href="main.css"
       
   
</head>
<body>

 <div id="wrapper"> 
    
<header>
<h1>CrackTec GmbH</h1>
<h2>Elektrotechnik<h2>
</header>

<nav>
    <ul>
        
    </ul>
</nav>
    
<main>
   

</main>

<aside>
    
</aside>

<footer>
    
</footer>

</div>  
    
</body>

enter code here
         header {

         width:  100%;
         height: 50px;
         background-color: #B8860B;
         
          }
        
         h1 {
         font-size: 50px;
         margin-top: 15px;
         color: white;
         padding-left: 100px;
         font-family: Arimo;
         }  
         
         h2 { 
         color: white;
         background-color: #556B2F;
         padding-left: 100px;
         margin-top: -39px;
         font-family: Arimo;
         }

标签： htmlcsswebheader

解决方案

您可以通过以下方式将列表项插入列表：

<header>
    <h1>CrackTec GmbH</h1>
    <div class="sub">
        <h2>Elektrotechnik</h2>
        <nav>
          <ul>
            <li><a>About</a></li>
            <li><a>Portfolio</a></li>
            <li><a>Contact Us</a></li>
          </ul>
        </nav>
    </div>
</header>

然后使用 Flexbox 来定位你的 h2 和你的列表

*{
    margin: 0;
    padding: 0;
}

header {
    width:  100%;
    background-color: #B8860B;
}
   
h1 {
    font-size: 50px;
    color: white;
    font-family: Arimo;
    padding:1rem;
}  
    
h2 { 
    color: white;
    font-family: Arimo;
}         

.sub {
    padding: 1rem;
    display: flex;
    align-items: center;
    background-color: #556B2F;
}

ul{
    display: flex;
    list-style: none;
    padding: 0;
    margin-left:1rem;
}

li {
    margin: 0 0.5rem;
}

推荐阅读