对齐标题中的div

Question

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

我希望在黄色框内的页面右侧显示我的链接。

黄色应该在标题类中。

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

我的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>

Answer 2

只需在标题中添加宽度：100％，事情看起来就像你想要的那样：

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

Answer 3

这应该做的工作。

.header {
 display: flex;
 flex-wrap: wrap;
 background: yellow;
 padding: 8px;
}

.leftheader {
  display: inline-block;
  color: red;
  width: 60%;
}

.rightheader {
  display: inline-block;
  width: 40%;
  text-align: right;
}