在標題中水平對齊不同的元素

Question

我想在菜單中對齊3個不同的元素，我嘗試了很多事情，但沒有成功。

index.html：

<header>
  <nav class="main-menu">
    <img class="logo" src="img/teste.svg" alt="">
    <ul class="links-menu">
      <li><input type="text" name="" value=""></li>
      <li>Carreiras & Formações</li>
      <li>Para Empresas</li>
      <li>Como Funciona</li>
    </ul>
    <ul class="register-menu">
      <li>Entrar</li>
      <button type="button" name="button">Matricule-se</button>
    </ul>
  </nav>
</header>

default.css：

header {
  background: rgb(28, 119, 149);
  width: 70%;
  height: 4.5em;
  margin: .5em 15%;
  border-bottom: #8a8a8a;
  border-width: .2em;
  border-style: solid;
  text-align: center;
  text-transform: uppercase;
  display: inline-block;
}

.main-menu{
  width: 100%;
  display: inline-block;
}

li {
  display: inline;
}

還有在HTML中引用的reset.css，有什么幫助嗎？

Answer 1

使用提供的CSS，您代碼中的列表項已經水平對齊。

Answer 2

做到這一點的一種方法是將UL元素作為目標，並將display屬性設置為display: inline-block 。 我會對您的li元素執行相同的操作，以便您可以調整它們的填充和邊距。 請參閱下面的示例（注意，我將在“整頁”視圖中查看它以獲取完整結果）

 header { background: rgb(28, 119, 149); width: 70%; height: 4.5em; margin: .5em 15%; border-bottom: #8a8a8a; border-width: .2em; border-style: solid; text-align: center; text-transform: uppercase; display: inline-block; } .main-menu{ width: 100%; display: inline-block; } ul { padding-left: 0; } ul, li { display: inline-block; } 

 <header> <nav class="main-menu"> <img class="logo" src="img/teste.svg" alt=""> <ul class="links-menu"> <li><input type="text" name="" value=""></li> <li>Carreiras & Formações</li> <li>Para Empresas</li> <li>Como Funciona</li> </ul> <ul class="register-menu"> <li>Entrar</li> <li> <button type="button" name="button">Matricule-se</button> </li> </ul> </nav> </header> 

Answer 3

您是否嘗試過使用flexbox？ 就像是：

 header { background: rgb(28, 119, 149); width: 100%; height: 4.5em; border-bottom: #8a8a8a; border-width: .2em; border-style: solid; text-align: center; text-transform: uppercase; } .main-menu{ width: 100%; display: flex; justify-content: space-between; align-items: center; } .links-menu, .register-menu { list-style: none; } .links-menu li{ display: inline-block; margin: 5px; } 

 <header> <nav class="main-menu"> <img class="logo" src="img/teste.svg" alt=""> <ul class="links-menu"> <li><input type="text" name="" value=""></li> <li>Elements</li> <li>Para Empresas</li> <li>Como Funciona</li> </ul> <ul class="register-menu"> <li>Entrar</li> <button type="button" name="button">Matricule-se</button> </ul> </nav> </header> 

Answer 4

試試這個，希望它也能起作用。

.main-menu {
  width: 100%;
  display: inline-flex;

}

對您的主菜單類進行這些更改