使用CSS的钻石形状布局

Question

我试图以菱形形式布置无序列表.

我不知道如何做到这一点,而不是添加hacky <div>的所有地方.

我宁愿保持语义清洁ul.

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

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

我希望它看起来像这样:

也许这样的事情可以用display: flex？也许display: table-cell吧？到目前为止,我已经尝试了一切,我无法弄明白.

Answer 1

我很想知道是否有人想出一些更聪明的东西.这是我想到的最简单的路线 - 只需使用绝对定位.

ul {
  list-style: none;
  padding: 0;
  position: relative;
  width: 200px;
  height: 80px;
}

li {
  border: 2px solid #000;
  font-size: 18px;
  padding: 4px;
  position: absolute;
}

li:nth-child(1) { top: 50%;  left: 0;   transform: translateY(-50%); }
li:nth-child(2) { top: 0;    left: 50%; transform: translateX(-50%); }
li:nth-child(3) { bottom: 0; left: 50%; transform: translateX(-50%); }
li:nth-child(4) { top: 50%;  right: 0;  transform: translateY(-50%); }

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

Answer 2

布局可以通过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 lines
ul {  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

笔记:

1. 将容器设置为column wrap.
2. 要使flex项知道要包装的位置,必须在容器上定义高度.
3. 删除ul默认填充.
4. 使列表项消耗所有列空间.
5. 中心垂直和水平跨越.
6. 使第二个和第三个列表项占用半列空间,因此两者都适合一列.
7. 垂直和水平居中文本.