css - 如何推动每个元素垂直换行

Question

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

我可以通过在每个 li 标记后应用 div class = clearfix 轻松做到这一点，但我收到一个警告，不允许将 's 嵌套在 ul 中。它在浏览器中呈现得很好，但我不喜欢这些警告，而且我对语法有强迫症。

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

CSS 修复，例如 Margin/Padding、Clear、Display:Block all 无济于事。

这是我下面的代码示例：

 <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>

标准安全许可证

工具箱会谈

大西洋海军陆战队社区

坎贝尔十字路口

胡德堡家庭住宅

英尺鼓山社区

朋友

Answer 1

.navbarcustom li {
 display: block;
}

Answer 2

尝试这个

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

Answer 3

McHat 和 cpt-crucy，

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

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