Question

我有一个由5个链接组成的导航栏。其中三个需要居中，另外两个需要定位正确。但是，我得到以下内容，其中三个“居中”链接实际上是不是居中。两个位于右侧的链接会将三个居中的链接向左拉一点。有人可以帮我将三个链接居中吗？

这是我的代码（索引）：

<nav class="navbar " style="margin-bottom: 0px;border:1px solid blue;" >

          <!-- header -->
          <div class="navbar-header">

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#barra-navegacao">
              <span class="sr-only">alternar navegação</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>

          </div><!-- /header -->

          <!-- navbar -->
          <div id="barra-navegacao" class="collapse navbar-collapse" style="border:1px dashed red;" >

            <ul class="nav navbar-nav" style="border:1px solid red;">


              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>  

            </ul>

            <ul class="nav navbar-nav navbar-right" style="border:1px solid red;">

              <li><a href="inscrevase.php">Inscrever-se</a></li>
              <li  class="<?= $erro == 1 ? 'open':'' ?>">
                <a id="entrar" data-target="#" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Entrar</a>

                <ul class="dropdown-menu" aria-labelledby="entrar">
                  <div class="col-md-12">

                      <h3>Você possui uma conta?</h3>

                      <br />

                    <form method="post" action="validar_acesso.php" id="formLogin">

                      <div class="form-group">
                        <input type="text" class="form-control" id="campo_usuario" name="usuario" placeholder="Usuário" />
                      </div>

                      <div class="form-group">
                        <input type="password" class="form-control red" id="campo_senha" name="senha" placeholder="Senha" />
                      </div>

                      <button type="buttom" class="btn btn-primary" id="btn_login">Entrar</button>

                      <br/><br/>

                    </form>

                    <?php
                      if($erro == 1){
                        echo '<font color="#FF0000"> Usuário e ou senha inválido(s)</font>';
                      }
                    ?>


                  </div><!-- /col-md-12 -->
                </ul><!-- dropdown-menu -->
              </li>

            </ul>

          </div><!-- /navbar --> 
    </nav><!--/nav  -->

这是我的css样式文件：

    *{
    margin: 0px;
    padding:0px;
    box-sizing: border-box;
}

body{
    background: url('imagens/airplane.jpg') no-repeat;
    background-position: center;
    background-attachment: fixed;/*imagem fixa no fundo*/
    background-size: cover;/*evita que com o zoom o background fique menor*/
}

.navbar{
    background-color: black;

}



.icon-bar{
    background:white !important;

}


/*remove o gap entre os links e a navbar*/
.navbar-nav li {
  float: none;
  display: inline-block;
}

/*alinhamento da navbar ao centro*/
.navbar-nav {
    display: inline-block;
    float: none;
}

.navbar-collapse{
    text-align: center;
}
/*fim do alinhamento da navbar ao centro*/


.navbar a{
    background-color: black;
    color: white;

}

.navbar a:hover{
    background-color: gray;
    color: red;
}

.navbar a:focus {
    background-color: gray;
    color: black;
}

.vertical-line{
    width: 2px;
    background-color: gray;
    margin: 0 auto;
}

.group1{
    display: grid;
    grid-template-columns: 1fr 0.1fr 1fr;
}

.group2{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    color: white;
    text-align: center;
    margin-top: 30px;
}

.attack-airplane{
    display: block;
    margin: 0 auto;
    width: 40%;/*observe que o tamanho é igual ao do texto*/
}

.man-shadow{
    width: 40%;
}

.text-attack-airplane{
    width: 40%;/*observe que o tamanho é igual ao da imagem*/
    margin: 0 auto;
    border:1px solid red;
    word-wrap: break-word;
    color: white;
}

.text{
    text-align: justify;
}

/*barra com links de midias sociais*/
#social-media{
    background-color: black;
    text-align: center;
}

/*textos abaixo das 3 imagens*/
#pictures p{
    text-align: justify;
    margin: 0 30px;
}



#pictures img{
    width: 235px;
    height: 214px;

}

/*efeito de aproximação das imagens*/
#pictures img:hover{
    width: 235px;
    height: 214px;
    transform: scale(1.1);
    transition: all 1s;
}

@media screen and (max-width: 676px){

    .group1{
    display: grid;
    grid-template-columns: 1fr;
    }

    .group2{
        grid-template-columns: 1fr;
    }

    .vertical-line{
        display: none;
    }

    .attack-airplane{
        width: 80%;
    }

    .text-attack-airplane{
        width: 80%;

    }

}

Answer 1

您面临的问题之一是浏览器正在计算两个<ul>的位置-您没有应用任何CSS来强制浏览器执行其他操作。

通过在右对齐的<ul>上使用绝对定位，您实际上可以从布局中删除它的足迹。这是我的建议：

div.navbar-collapse {
    position:relative;
    }
ul.navbar-nav:nth-of-type(1) {
    display:table;
    margin:0 auto;
    }
ul.navbar-nav:nth-of-type(2) {
    position:absolute;
    top:0px;
    right:0px;
    }

如以下代码段所示：（也显示在Codepen上）

* {
  margin: 0px;
  padding:0px;
  box-sizing: border-box;
}
.navbar {
  background-color: black;
}
.navbar-header {
  text-align:center;
  color:#fff;
}
.navbar-collapse {
  position:relative;
}
/*remove o gap entre os links e a navbar*/
.navbar-nav li {
  display: inline-block;
}
/*alinhamento da navbar ao centro*/
.navbar-nav:nth-of-type(1) {
  display:table;
  margin:0 auto;
}
/*fim do alinhamento da navbar ao centro*/
.navbar a {
  display:block;
  color:white;
  padding:8px;
}
.navbar li ~ li a {
  margin-left:16px;
}
.navbar a:hover{
  background-color: gray;
  color:red;
}
.navbar a:focus {
  background-color:gray;
  color:black;
}
.navbar-nav:nth-of-type(2) {
  position:absolute;
  top:0px;
  right:0px;
  border-color:yellow !important;
}

<nav class="navbar" style="border:10px solid blue;" >

<!-- header -->
<div class="navbar-header">
|
</div><!-- /header -->

<!-- navbar -->
<div id="barra-navegacao" class="collapse navbar-collapse" style="border:1px dashed red;" >
  <ul class="nav navbar-nav navbar-center" style="border:1px solid red;">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>  
  </ul>
  <ul class="nav navbar-nav" style="border:1px solid red;">
    <li><a href="inscrevase.php">Inscrever-se</a></li>
    <li  class="<?= $erro == 1 ? 'open':'' ?>">
    <a id="entrar" data-target="#" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Entrar</a>
    </li>
  </ul>
</div><!-- /navbar --> 
</nav><!--/nav  -->

为清楚起见，我删除了许多HTML元素和CSS条目。

Answer 2

如果我的代码如下（删除以下两行），我该如何解决我的问题呢？：

<nav class="navbar" style="border:10px solid blue;" >

<!-- header -->
<div class="navbar-header">
|
</div><!-- /header -->

<!-- navbar -->
<div id="barra-navegacao" class="collapse navbar-collapse" style="border:1px dashed red;" >
  <ul class="nav navbar-nav navbar-center" style="border:1px solid red;">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>

  </ul> /*THIS LINE REMOVED*/
  <ul class="nav navbar-nav" style="border:1px solid red;"> /*THIS LINE REMOVED TOO*/

    <li><a href="inscrevase.php">Inscrever-se</a></li>
    <li  class="<?= $erro == 1 ? 'open':'' ?>">
    <a id="entrar" data-target="#" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Entrar</a>
    </li>
  </ul>
</div><!-- /navbar --> 
</nav><!--/nav  -->

如何在导航栏中将居中链接和其他右/左位置的链接居中？

2 个答案: