在标题中水平对齐不同的元素

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;

}

对您的主菜单类进行这些更改