html – 带CSS的钻石形状布局

概述我试图以钻石形式布置无序列表. 我不知道如何做到这一点,而没有添加hacky< div>的全部. 我宁愿在语义上保持一个干净的ul. 代码示例(我可以添加id,这没有问题.) <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li></ul> 我希望它看起来像这样： 也许这样的事情可以 我试图以钻石形式布置无序列表.

我不知道如何做到这一点,而没有添加Hacky< div>的全部.

我宁愿在语义上保持一个干净的ul.

代码示例(我可以添加ID,这没有问题.)

<ul>    <li>item 1</li>    <li>item 2</li>    <li>item 3</li>    <li>item 4</li></ul>

我希望它看起来像这样：

也许这样的事情可以通过显示：flex来实现？也许显示：table-cell？我已经尝试了一切,迄今为止,我无法弄清楚.

解决方法 可以通过flexBox实现布局：

ul {  display: flex;  flex-direction: column;                 /* 1 */  flex-wrap: wrap;                        /* 1 */  height: 200px;                          /* 2 */  List-style: none;  padding: 0;                             /* 3 */}li {  flex: 0 0 100%;                         /* 4 */  display: flex;                        justify-content: center;                /* 5 */  align-items: center;                    /* 5 */  background-color: lightyellow;}li:not(:first-child):not(:last-child) {   /* 6 */  flex-basis: 50%;}span {  height: 50px;  wIDth: 100px;  background-color: lightgreen;  border: 1px solID black;  display: flex;                         /* 7 */  justify-content: center;               /* 7 */  align-items: center;                   /* 7 */}* { Box-sizing: border-Box; }/* grID linesul {  border: 1px dashed black; }li {  border: 1px solID red;  }*/

<ul>  <li><span>item 1</span></li>  <li><span>item 2</span></li>  <li><span>item 3</span></li>  <li><span>item 4</span></li></ul>

jsFiddle

笔记：

>将容器设置为列换行.>对于Flex项目来知道要包装的位置,必须在容器上定义高度.>删除ul默认填充.>使列表项消耗所有列空间.>中心横向垂直.>使第二和第三个列表项消耗半列空间,因此两者都适合一列.>垂直和水平中心文本.

总结

以上是内存溢出为你收集整理的html – 带CSS的钻石形状布局全部内容，希望文章能够帮你解决html – 带CSS的钻石形状布局所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。