Question

我为我的网站使用bootstrap，但是当我的导航栏是导航栏时，右侧链接设置为内联，但是glyphicon是固定的顶部。我需要所有元素都是一行中的垂直方向。谢谢大家

HTML

<div class="collapse navbar-collapse" id="responsive-menu">

    <ul class="nav navbar-nav navbar-right" >

       <li><a class="nav_links" href="#main">Главная</a></li>

       <li id="navi_images"><span class="glyphicon glyphicon-heart-empty"></span></li>

       <li><a class="nav_links" href="#portfolio">Портфолио</a></li>

       <li id="navi_images"><span class="glyphicon glyphicon-scissors"></span></li>

       <li><a class="nav_links" href="#">Контакты</a></li>

       <li id="navi_images"><span class="glyphicon glyphicon-heart-empty"></span></li>

       <li><a class="nav_links" href="#">Отзывы</a></li>

    </ul>  

  </div>

我无法提出任何想法

Answer 1

在ul元素

上应用以下样式

display: flex;
align-items: center;

Answer 2

＆＃13;

   .nav li {
  display:inline;
  vertical-align:middle;
  line-height:35px;
}

＆＃13;

 <div class="container">
      <div class="collapse navbar-collapse" id="responsive-menu">

    <ul class="nav navbar-nav navbar-right" >

       <li><a class="nav_links" href="#main">Главная</a></li>

       <li id="navi_images"><span class="glyphicon glyphicon-heart-empty"></span></li>

       <li><a class="nav_links" href="#portfolio">Портфолио</a></li>

       <li id="navi_images"><span class="glyphicon glyphicon-scissors"></span></li>

       <li><a class="nav_links" href="#">Контакты</a></li>

       <li id="navi_images"><span class="glyphicon glyphicon-heart-empty"></span></li>

       <li><a class="nav_links" href="#">Отзывы</a></li>

    </ul>  

  </div>
    </div>

＆＃13;

如何设置内联和垂直对齐的ul元素

2 个答案: