Question

我创建了一个垂直导航栏，其中包含一个带有几个li标签的ul元素。我希望每个li标签都显示在自己的行上。

我可以通过在每个li标记之后应用div class = clearfix来轻松实现此目的，但是我得到警告，不允许将s嵌套在ul内。它可以在浏览器中很好地呈现，但是我不喜欢警告，我对语法有强迫症。

我尝试了几种不同的方法来解决此问题。

CSS修复程序，例如边距/填充，清除，显示：全部阻止均无济于事。

这是我下面的代码示例：

 <div class="col-sm-2" id="siteSafetyContainer" style="display:none">
            <nav class="navbar navbar-inverse" style="font-size:12px;">
                <div id="row">
                    <ul class="nav navbar-nav navbarcustom">
                        <li>
                            <a href="#">Permits</a>
                        </li>                            
                        <li>
                            <a href="#"  onclick="">Standard Safety Permits</a>
                        </li>                           
                        <li>
                            <a href="#"  onclick="">Toolbox Talks</a>
                        </li>                            
                        <li>
                            <a href="#"  onclick="">Atlantic Marine Corps Communities</a>
                        </li>                            
                        <li>
                            <a href="#"  onclick="">Campbell Crossing</a>
                        </li>                            
                        <li>
                            <a href="#"  onclick="">Fort Hood Family Housing</a>
                        </li>                            
                        <li>
                            <a href="#"  onclick="">Ft Drum Mountain Community</a>
                        </li>  
                        <li>
                            <a href="#"  onclick="">PAL</a>
                        </li>                            
                        </ul>
                </div>
            </nav>
        </div>

标准安全许可证

工具箱对话

大西洋海军陆战队社区

Campbell Crossing

胡德堡家庭住房

鼓山山区社区

PAL

Answer 1

.navbarcustom li {
 display: block;
}

Answer 2

尝试一下

.navbar-nav{
  flex-flow: column wrap !important;
  min-width: 260px;
}

Answer 3

McHat和cpt-cruncy，

感谢你们俩！这是您的两个答案的结合。见下文：

.navbarcustom > li {
flex-flow: column wrap !important;
min-width: 260px;}

如何将每个<li>元素推到垂直<nav>

3 个答案: