如何实现li内嵌套ul并排对齐 解决ul偏移与空li显示问题

正在实现CSS dropright效果，目标是将li内部嵌套的ul设置为并排对齐，首个ul的偏移问题已解决，当前遇到的问题是代码中存在无内容的空li标签，为li设置border-bottom属性后，空li会异常显示。

• HTML结构不符合规范：ul的直接子元素只能是li标签，原代码中第一层ul内存在未闭合的空li，且嵌套的ul直接作为第一层ul的子元素存在，而非放在li内部，是产生空li标签的核心原因
• 没有针对空li做样式规避处理

1. 修正HTML结构 #

删除冗余空li，将嵌套ul放入需要触发dropright效果的li标签内部，符合HTML嵌套规范：

<div class="container">
  <ul class="ul-items">
    <li>Item one</li>
    <li>Item one</li>
    <li>Item one</li>
    <li>Item one</li>
    <li>
      Item one
      <ul class="ul-items">
        <li>Item one</li>
        <li>Item one</li>
        <li>Item one</li>
        <li>Item one</li>
        <li>Item one</li>
      </ul>
    </li>
  </ul>
</div>

2. 补充CSS规则 #

• 新增顶层ul的偏移重置规则，避免首个ul错位
• 新增空li隐藏规则，彻底规避空li的边框异常

.container{
  display: flex;
  position: relative;
}
/* 重置顶层ul的偏移 */
.container > .ul-items{
  left: 0;
  margin-left: 0;
}
.ul-items{
  list-style: none;
  position: absolute;
  top: 0;
  left: 100px;
  width: 100px;
  padding: 0;
  margin: 0;
}
/* 空li隐藏，规避边框异常 */
li:empty {
  display: none;
}
/* 你需要的li边框样式 */
li {
  border-bottom: 1px solid #ccc;
  padding: 4px 8px;
}

内容的提问来源于stack exchange，提问作者Cynthia Onyilimba