如何实现带对齐项目符号的水平HTML列表元素旋转-45度

要实现你需要的效果，核心是解决不同长度文本旋转后的对齐问题，同时兼顾项目符号、水平线的需求。可以通过Flex布局控制排列基准，结合伪元素自定义项目符号和水平线来实现：

完整代码实现 #

<ul>
    <li>aaa</li>
    <li>aaaaaa</li>
    <li>aaaaaaaaaa</li>
    <li>aaaaaaaaaaaaa</li>
    <li>aaaaaaaaaaaaaaaa</li>
</ul>

/* 重置ul默认样式并设置Flex布局 */
ul {
  list-style: none;
  padding: 0;
  margin: 50px 20px;
  display: flex;
  gap: 60px; /* 调整li之间的间距，适配文本长度 */
  align-items: flex-end; /* 让所有li底部对齐，保证旋转基准统一 */
  position: relative; /* 为水平线提供定位上下文 */
}

/* 自定义项目符号，替代默认样式 */
li::before {
  content: "•";
  display: inline-block;
  margin-right: 8px; /* 项目符号与文本的间距 */
  font-size: 1.2em;
}

/* 旋转li并设置旋转原点 */
li {
  transform: rotate(-45deg);
  transform-origin: bottom left; /* 以底部左角为旋转中心，确保对齐一致 */
  padding: 0 10px;
}

/* 添加穿过项目符号的水平线 */
ul::after {
  content: "";
  position: absolute;
  bottom: -5px; /* 调整位置让线穿过项目符号 */
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
}

关键说明 #

1. Flex布局替代Float：用display: flex实现水平排列，align-items: flex-end让所有li的底部对齐，从根源解决不同文本长度导致的旋转后错位问题。
2. 自定义项目符号：隐藏默认的list-style，用::before伪元素模拟圆点符号，旋转时能和文本保持稳定的相对位置，满足“同一垂直平面”的要求。
3. 旋转原点控制：设置transform-origin: bottom left，让每个li都以自身底部左角为旋转中心，不管文本长短，旋转后的位置基准完全一致。
4. 水平线实现：通过ul的::after伪元素添加绝对定位的水平线，调整bottom值让线刚好穿过所有项目符号。

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