Html 使用CSS的菱形布局

我试图以菱形的形式布局一个无序的列表

我不知道如何做到这一点而不添加到处都是的hacky

我宁愿在语义上保持它是干净的

ul

代码示例（我可以添加id，这没有问题。）

项目1
项目2
项目3
项目4

我希望它看起来像这样：

---

也许可以通过

display:flex

实现类似的功能？可能

显示：表格单元格

？到目前为止，我什么都试过了，我想不出答案。

我想看看是否有人能想出更聪明的办法。这是我想到的最简单的路线——使用绝对定位

ul{
列表样式：无；
填充：0；
位置：相对位置；
宽度：200px；
高度：80px；
}
李{
边框：2倍实心#000；
字号：18px；
填充：4px；
位置：绝对位置；
}
li:n子（1）{top:50%；left:0；transform:translateY（-50%）；}
li:n子（2）{top:0；left:50%；transform:translateX（-50%）；}
li:n子（3）{底部：0；左侧：50%；变换：translateX（-50%）；}
li:n子（4）{top:50%；right:0；transform:translateY（-50%）；}

项目1
项目2
项目3
项目4

使用flexbox可以通过以下方式实现布局：

ul{
显示器：flex；
弯曲方向：列；/*1*/
柔性包裹：包裹；/*1*/
高度：200px；/*2*/
列表样式：无；
填充：0；/*3*/
}
李{
弹性：0 100%；/*4*/
显示器：flex；
对齐内容：中心；/*5*/
对齐项目：居中；/*5*/
背景颜色：浅黄色；
}
李：不是（：第一个孩子）：不是（：最后一个孩子）{/*6*/
弹性基准：50%；
}
跨度{
高度：50px；
宽度：100px；
背景颜色：浅绿色；
边框：1px纯黑；
显示：flex；/*7*/
对齐内容：中心；/*7*/
对齐项目：居中；/*7*/
}
*{框大小：边框框；}
/*网格线
ul{边框：1px黑色虚线；}
li{边框：1px纯红；}
*/

项目1
项目2
项目3
项目4

您只需将第二个和第三个

更改为
，并将其包装在
中即可：


ul{
列表样式：无；
}
李{
显示：内联块；
填充：0；
垂直对齐：中间对齐；
}
li>span{
显示：块；
}
李：不是（第（2）类的第n个），
li>span{
边框：2件纯黑；
保证金：4倍；
}

项目1

项目2
项目3

项目4

ulli{
位置：绝对位置；
}
#项目1{
左边距：10%；
}
#项目2{
利润率最高：5%；
}
#项目3{
利润率最高：5%；
左缘：20%；
}
#项目4{
利润率最高：10%；
左边距：10%；
}

项目1
第2项
第3项
第4项
使用flex的另一种方法（由于已经给出了另一种方法，请参考）：


ul{
显示：内联flex；/*或flex+边距：演示自动*/
柔性流动：柱；
柔性包装：包装；
高度：6.25em；/*强制包装成列需要一个高度，注意基本边距、填充和需要/设置的行数*/*/
填充：0；
保证金：0；
宽度：25em；/*任何您想要的*/
背景：灰色；
}
李{
显示：阻止；/*删除项目符号*/
填充：0.25em；
边框：实心；
宽度：32%；
边距：0.5em；/*不管怎样，只要注意ul高度即可*/
框大小：边框框；/*在高度计算中包括填充和边框*/
}
李：第一种，李：最后一种{
保证金：2em 0；/*至少增加保证金上限*/
}
身体{
文本对齐：居中；/*以居中内联flex容器和li的文本*/
}
悬停{
字体大小：1.25em；/*请参阅字体大小不同时的行为*/
}

项目1
项目2
项目3
项目4
这是一个很好的方法。我在这里很懒，我可以摆弄它，但你为什么在那里使用翻译？这是什么意思do@ObedMarquezParlapiano平移是为了使元素在水平或垂直方向上正确居中-如果没有平移，
top
和
left
属性将仅基于元素左上角的X/Y坐标定位元素。非常整洁。非常感谢。我选择基于flexbox的方法作为我的答案，但这也非常有效。非常好，非常感谢。我很感激你写的笔记！回答得好！带双重否定的选择器对我来说似乎有点难，所以我用了另一种方法来做同样的事情。唯一的区别是，现在李的背景并没有覆盖整个height@vals，双否定选择器仅用于演示。另一种选择是两个逗号分隔的选择器。我想我选择前者是因为它看起来比较短。这对答案不是很重要。你的版本也可以。谢谢你的想法！我宁愿不要选择嵌套的
ul
，以保持清洁（列表中的列表意味着存在子排序，但子排序纯粹是视觉的，而不是语义的）。该列表将用于导航。从技术上讲，我想那是订购的。如果订购纯粹是视觉化的，您会使用
ol
作为导航链接吗？无论如何，再次谢谢你@user3714447我不完全是我当时所想的，我把它复杂化了很多xD看到编辑过的答案，m
<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
</ul>