无法获得理想的外观

Question

enter image description here 我正在尝试将所有菜单（包括菜单，奖项，以及标题右侧存在的菜单）水平对齐。请提供一些代码，以帮助我水平而不是垂直提供菜单。我已经提供了我的代码片段，我用于使用bootstrap，js。

设计网站

            <div id="collapsable-nav" class="collapse navbar-collapse">
                <ul id="nav-list" class="nav navbar-nav navbar-right">
              <li>
                <a href="menu-categories.html" class="pull-left">
                    <span class="glyphicon glyphicon-cutlery"></span><br 
              class="hidden-xs">Menu</a>
              </li>
                <li>
                   <a href="#">
                    <span class="glyphicon glyphicon-info-sign"></span><br 
              class="hidden-xs">About
                </a>

              </li>
            <li>
              <a href="#">
                  <span class="glyphicon glyphicon-info-sign"></span><br 
                 class="hidden-xs">Awards</a>
            </li>
            <li id="phone class="hidden-xs">
              <a  href="TEl:8461044634"><span>8461044634</span>
                </a><div>*We  Deliver</div></li>
              </li>
        </ul>
        </div>
        </div> 

Answer 1

在CSS中覆盖这样的li项目的“显示”样式：

li {
   display: inline-block;
}

Answer 2

如果您使用Bootstrap设置了列表的样式，并且您尝试覆盖它，请使用！important。但这不是最好的做法。最好删除bootstrap并尝试使用raw css解决它。

li { 
 display: inline-block !important; 
}

祝你好运。