如何将下拉菜单中的“glyphicon”对齐在一条垂直线上答案

【问题标题】：How to align "glyphicon" in the drop-down menu in one vertical line如何将下拉菜单中的“glyphicon”对齐在一条垂直线上
【发布时间】：2017-10-10 16:47:27
【问题描述】：

在移动设备的下拉菜单中，“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>

【问题讨论】：

你能发布一张图片来展示你想要的样子吗？阅读描述和查看图片我并不清楚。
您是否希望列表项在无序列表中居中但仍由叶子排列？

标签： css html twitter-bootstrap-3

【解决方案1】：

如果您将内容包装在带有wrap 类的div 标记中并给它一个固定宽度，您可以将多个元素相对于彼此垂直对齐。我希望这是您想要实现的目标。以下 CSS 类已更改。

CSS：

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

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

Codepen Demo

【讨论】：

@VSolodkiy 这个问题可以结束吗？
是的，这个问题可以结束了。