html - 对齐标题中的 div

Question

.header {
 background-color: yellow;
 font-family: 'Arial';
 display: inline-block;
}

.leftheader{
 float: left;
}

#Logo{
 font-size: 40px;
 font-weight: 700;
 display: inline-block;
}

#LogoLTD{
 font-size: 20px;
 display: inline-block;
}

.rightheader{
 display: flex;
 float: right;
}

.rightheader a{
 color: black;
 font-size: 20px;
 font-weight: 700;
 text-decoration: none;
}

<section class="header">

 <div class="leftheader">
   <div id="Logo">COMPANY NAME</div>
   <div id="LogoLTD">LIMITED</div>
  </div>

 <div class="rightheader">
     <a href="/home.html">HOME</a>
     <a href="/who.html">WHO</a>
     <a href="/contact.html">CONTACT</a>
 </div>

</section>

我一直在尝试为我的网站制作标题，但无法正确对齐。

我希望我的链接位于页面右侧的黄色框内。

黄色应该在标题类中。

然后 leftheader div 和 rightheader div 应该在标题类中。它们应该位于左侧和右侧，但无论我做什么我都无法让它工作:(

我的 HTML 是:

<section class="header">

 <div class="leftheader">
   <div id="Logo">COMPANY NAME</div>
   <div id="LogoLTD">LIMITED</div>
  </div>

 <div class="rightheader">
     <a href="/home.html">HOME</a>
     <a href="/who.html">WHO</a>
     <a href="/contact.html">CONTACT</a>
 </div>

</section>

我的 CSS 是:

.header {
 background-color: yellow;
 font-family: 'Arial';
 display: inline-block;
}

.leftheader{
 float: left;
}

#Logo{
 font-size: 40px;
 font-weight: 700;
 display: inline-block;
}

#LogoLTD{
 font-size: 20px;
 display: inline-block;
}

.rightheader{
 display: flex;
 float: right;
}

.rightheader a{
 color: black;
 font-size: 20px;
 font-weight: 700;
 text-decoration: none;
}

Answer 1

您可以使用 flex 来做到这一点。查看下面的代码。

.header {
 background-color: yellow;
 font-family: 'Arial';
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 align-items: center;
}

.leftheader{
 display: flex;
 align-items: flex-end;
}

#Logo{
 font-size: 40px;
 font-weight: 700;
 display: inline-block;
}

#LogoLTD{
 font-size: 20px;
 display: inline-block;
 padding-bottom: 5px;
}

.rightheader{
 display: flex;
}

.rightheader a{
 color: black;
 font-size: 20px;
 font-weight: 700;
 text-decoration: none;
}

<section class="header">

 <div class="leftheader">
   <div id="Logo">COMPANY NAME</div>
   <div id="LogoLTD">LIMITED</div>
  </div>

 <div class="rightheader">
     <a href="/home.html">HOME</a>
     <a href="/who.html">WHO</a>
     <a href="/contact.html">CONTACT</a>
 </div>

</section>