Question

这是一个演示：demo

我只想使用基础简单菜单知道如何垂直对齐。我对此很陌生，所以如果我的问题有点愚蠢，我深表歉意：

此处的代码：

<nav>
        <ul class="menu expanded align-center">
            <li class="image"><i class="fab fa-cloudversify fa-3x"></i></li>
            <li><a href="#"><i></i><span>Inicio</span></a></li>
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Inicio</a></li>
        </ul>  
</nav>

Css：

ul li {
    height: 70px;
    background-color: #2b2b2b;
}

图书馆：基金会

Answer 1

签出

.menu-centered {
  list-style-type: none;
}

.menu-centered.vertical > li {
 margin: .5rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation-flex.min.css" rel="stylesheet"/>
<ul class="menu-centered vertical">
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Inicio</a></li>
</ul>

Answer 2

将flex添加到<div class="textbox-container col-md-10"> <input id="searchBoxMain" type="search" class="search-input" autocomplete="off" placeholder="Comma seperated skills" ng-model-options="{ debounce: 200 }" ng-model="miCtrl.skillInput" ng-keydown="miCtrl.apis.onKeyDown(miCtrl.skillInput, $event)" ng-change="miCtrl.apis.fetchSuggestions();miCtrl.apis.addSkillSet(miCtrl.skillInput);" style="font-size: 15px;"> <input id="searchBoxAutocomplete" type="text" ng-disabled="true" class="search-suggest" autocomplete="off" spellcheck="" ng-model="miCtrl.suggest" disabled="disabled"> </div> <button type="submit" class="search-btn icon-search col-md-2" id="searchBtn" ng-disabled="!miCtrl.skillInput"></button> </li> </ul> </form> <div class="row" "> <ul class="list-inline mt-10 "> <li ng-repeat="item in miCtrl.skillInput track by $index " ng-if="miCtrl.skillInput.length> 0"> <span class="facet-text">{{item}}</span> </li> </ul> </div> </div>标记中并确保其完全适合function addSkillSet(skillInputSet) { if (!angular.isArray(skillInputSet) && skillInputSet.indexOf(",") == skillInputSet.length - 1) { var skillSet = skillInputSet.split(","); miCtrl.skillInput = []; for (var i = 0; i < skillSet.length; i++) { miCtrl.skillInput[i] = skillSet[i]; } } }元素内部，将使您可以放置文本。

有关示例，请参见我的笔：https://codepen.io/anon/pen/qyPMVx

.html

.css

li

使用基础的垂直中心菜单

2 个答案: