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;

}

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

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

4 个答案: