Question

I have a nav with li and a elements. I have one a with the name "Quem Somos" and other with "Educação e Carreira", but this last one has white-space: wrap. The alignment of all elements is being taking in the first word, in this case, "Quem somos" is align horizontally with "Educação e".

My doubt is if is possible to align the a "Quem Somos" in the middle of "Educação e Carreira", which has wrap rule. Like, the align will take place between the wrap. Current alignment我只想对齐非环绕文字和环绕文字。

How I want to align

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device- 
    width, initial-scale=1">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min. 
       css" rel="stylesheet" />
</head>

<body>
  <nav class="nav navbar navbar-light">
    <div class="container">
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav align-items-center" id="ul-nav">
          <!--<li><a class="nav-link"  href="index.html">Home</a></li>-->
          <li><a class="nav-link" href="quemsomos.html">Quem Somos</a></li>
          <li><a class="nav-link" id="educacao" href="educacao_carreira.html">Educação e <br>Carreira</a></li>
          <li><a class="nav-link" href="http://proepi.org.br/comunidade" target="_blank">Comunidade<br> de Prática</a></li>
          <li><a class="nav-link" href="transparencia.html">Transparência</a>
          </li>
        </ul>
      </div>
  </nav>
</body>

</html>

Answer 1

查看您的代码，似乎您正在使用Bootstrap，如果是这样，只需在align-items-center navbar-nav中添加一个ul类，就可以得到期望的对齐方式。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-expand navbar-dark bg-dark">
  <div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav align-items-center" id="ul-nav">
      <!--<li><a class="nav-link"  href="index.html">Home</a></li>-->
      <li><a class="nav-link" href="quemsomos.html">Quem Somos</a></li>
      <li><a class="nav-link" id="educacao" href="educacao_carreira.html">Educação e <br>Carreira</a></li>
      <li><a class="nav-link" href="http://proepi.org.br/comunidade" target="_blank">Comunidade<br> de Prática</a></li>
      <li><a class="nav-link" href="transparencia.html">Transparência</a></li>
    </ul>
  </div>
</nav>

<!-- This is the same code you provided without the class I added -->
<nav class="navbar navbar-expand navbar-dark bg-dark mt-5">
  <div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav" id="ul-nav">
      <!--<li><a class="nav-link"  href="index.html">Home</a></li>-->
      <li><a class="nav-link" href="quemsomos.html">Quem Somos</a></li>
      <li><a class="nav-link" id="educacao" href="educacao_carreira.html">Educação e <br>Carreira</a></li>
      <li><a class="nav-link" href="http://proepi.org.br/comunidade" target="_blank">Comunidade<br> de Prática</a></li>
      <li><a class="nav-link" href="transparencia.html">Transparência</a></li>
    </ul>
  </div>
</nav>

问题中的代码已修复：

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device- 
width, initial-scale=1">
  <!-- You had spaces between bootstrap.min. and css -->
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <!-- Add navbar-expand to the nav -->
  <nav class="nav navbar navbar-expand navbar-light bg-success">
    <div class="container">
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav align-items-center" id="ul-nav">
          <!--<li><a class="nav-link"  href="index.html">Home</a></li>-->
          <li><a class="nav-link" href="quemsomos.html">Quem Somos</a></li>
          <li><a class="nav-link" id="educacao" href="educacao_carreira.html">Educação e <br>Carreira</a></li>
          <li><a class="nav-link" href="http://proepi.org.br/comunidade" target="_blank">Comunidade<br> de Prática</a></li>
          <li><a class="nav-link" href="transparencia.html">Transparência</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</body>

</html>

对齐<a> in the middle of other </a> <a> with white-space: wrap

1 个答案: