Question

在移动设备的下拉菜单中，“glyphicon-leaf”居中，但垂直地在一行中没有对齐，如文本的情况（附加屏幕） http://www.imageup.ru/img69/2884966/123.jpg.html

https://codepen.io/vosolodkiy/pen/XeqaOR HTML

       <div class="navbar-brand"><a href="index.html" title="Food, LLC"><h1>Food, LLC</h1>
            </a>
       </div>

     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu_collapse" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                      </button>
                    </div>

     <div id="menu_collapse" class="collapse navbar-collapse">
        <ul id="menu-list" class="nav navbar-nav">
          <li><a href="#Chicken" class="hidden-sm hidden-md hidden-lg">
            <span class="glyphicon glyphicon-leaf"></span>Chicken</a>
          </li>
          <li><a href="#Beef" class="hidden-sm hidden-md hidden-lg ">
            <span class="glyphicon glyphicon-leaf"></span>Beef</a>
          </li>
          <li><a href="#Sushi" class="hidden-sm hidden-md hidden-lg">
            <span class="glyphicon glyphicon-leaf"></span>Sushi</a>
          </li>
          </ul>
    </div><!--menu-list-->
    </div><!--container-->
    </nav><!--navigation menu-->
        </header>
      <!-- jQuery (Bootstrap JS plugins depend on it) -->
      <script src="js/jquery-3.2.1.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script src="js/script.js"></script>
    </body>

Answer 1

如果您将内容包含在div标记中并使用类wrap并为其指定固定宽度，则可以相对于彼此垂直对齐多个元素。我希望这是你想要实现的目标。以下CSS类已更改。

<强> CSS：

.wrap{
  width:120px;
  text-align:left;
  display: inline-block;
}

下面是一个相同的工作示例！如果这可以解决您的问题，请告诉我们！

Codepen Demo

如何在一个垂直线的下拉菜单中对齐“glyphicon”

1 个答案: