动态的遍历嵌套的ul和li

<c:forEach items="${nFmlist}" var="nFmenu">
<p>
<strong><font><font><c:out value="${nFmenu.name}"/></font></font></strong>
</p>
<c:forEach items="${itemList}" var="item">
 <c:if test="${nFmenu.id==item.fid}">
 <ul>
<li>
<a href="file:///D:/web/kingstuio%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/index.html"><font><font> <c:out value=" ${item.name}"/></font></font></a>
</li>
</ul>
 </c:if>
</c:forEach>

</c:forEach>

${nFmlist}放的是所有顶级结点对象,${itemList}放得是所有对象。

### JSP 中 `ul` `li` 元素的横向布局实现 为了确保 `ul` `li` 元素能够水平排列,在 CSS 中可以采用多种方法来调整这些元素的行为。一种常见的方式是利用弹性盒模型(Flexbox)。这种方法不仅简单而且具有良好的浏览器支持。 #### 使用 Flexbox 实现横向菜单栏 对于 `.menu` 类,应用如下样式: ```css .menu { display: flex; } ``` 这会使得所有的子元素默认情况下沿主轴方向分布,即从左到右依次排列[^3]。 针对每个列表项 (`<li>`), 可以为其添加类名为`.menu-item`, 并设定一定的间距: ```css .menu-item { margin-right: 10px; /* 设置右侧边距 */ } .menu-item:last-child { margin-right: 0; /* 移除最后一项的右边距 */ } ``` 如果希望进一步自定义链接外观,则可以通过给 `<a>` 标签指定特定的样式类别如 `.menu-link` 来完成: ```css .menu-link { text-decoration: none; color: inherit; } ``` 最后,在 HTML 或者 JSP 文件里构建相应的结构即可: ```jsp <ul class="menu"> <%-- 假设有若干个导航项目 --%> <c:forEach var="item" items="${navigationItems}"> <li class="menu-item"><a href="#" class="menu-link">${item.name}</a></li> </c:forEach> </ul> ``` 上述代码片段展示了如何遍历一个集合变量 `${navigationItems}` ,并为每一个成员创建一个新的 `<li>` 列表项以及内部嵌套的超链接 `<a>` 。这样就可以轻松地根据实际需求动态生成多个导航条目了。 另外需要注意的是,为了避免由于 JavaScript 动态修改宽度而导致的换行现象,应该确保外层容器有足够的空间容纳所有内联块级元素;或者考虑使用媒体查询等手段适配不同屏幕尺寸下的表现形式[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值