时间戳

首页 > 解决方案 > 使用 flexbox 时强制 ul li ul 在新行上

css - 使用 flexbox 时强制 ul li ul 在新行上

问题描述

在我花了两个小时试图自己解决这个问题之后，我觉得现在是询问真正知道如何编码的人的正确时机。

我是什么情况

我正在构建一个 WordPress 主题，我努力让导航按我想要的方式工作。我的想法是这样 的：主页草图

因为它是 WordPress 菜单（并且因为我计划调整整个网站的外观），所以我需要它作为一个列表。但是我很难让第一级项目显示为标题，第二级项目显示为下面的项目。

据我所知： https ://jsfiddle.net/grysom/bpe924du/

我尝试了使用 flexbox 属性的随机东西 + 使用 :after 选择器添加了一个中断，content: "\A";但没有运气。

你知道怎么做吗？甚至可能吗？

提前感谢您的想法！

祝你今天过得愉快

格里索姆

标签： cssflexbox

解决方案

<ul>您将希望第二级列表位于：<li>

<ul>
   <li>
      Pro veřejnost
      <ul>
         <li>Co je ergoterapie</li>
         <li>Kdo je ergoterapeut</li>
         <li>Seznam zařízení</li>
         <li>Etický kodex</li>
      </ul>
   </li>
   <li>
      Praxe
       <ul>
          <li>Nabídky práce</li>
         <li>Vychytávky a tipy</li>
         <li>Legislativa</li>
      </ul>
   </li>
 </ul>

我已经更新了您的 jsfiddle：https ://jsfiddle.net/grysom/bpe924du/但您需要稍微调整样式以区分级别。

推荐阅读