使用CSS的钻石形状布局

Question

我正在尝试以菱形形式布置无序列表。

我无法弄清楚如何在不添加hacky <div>的情况下做到这一点。

我宁愿在语义上保持干净ul。

代码示例（我可以添加id＆＃39; s，这没问题。）

<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. 对于要知道包装位置的弹性项目，必须在容器上定义高度。
3. 删除ul默认填充。
4. 使列表项占用所有列空间。
5. 中心垂直和水平跨越。
6. 使第二个和第三个列表项占用一半的列空间，因此两个列都适合一列。
7. 垂直和水平居中文字。

Answer 3

	    ul li{
           position:absolute;
        }
        #item1{
    	    margin-left:10%;
        }
        #item2{
    	    margin-top:5%;
        }
        #item3{
    	    margin-top:5%;
            margin-left:20%;
        }
        #item4{
    	    margin-top:10%;
            margin-left:10%;
        }

    <ul >
        <li id=item1>item 1</li>
        <li id=item2>item 2</li>
        <li id=item3>item 3</li>
        <li id=item4>item 4</li>
    </ul>

这是我的版本......只是让它发挥作用......你可以找到更好的方法或者让它变得更好......

Answer 4

您只需将第二个和第三个<li>更改为<span>并将其换成<li>：

＆＃13;

＆＃13;

ul {
  list-style: none;
}

li {
  display: inline-block;
  padding: 0;
  vertical-align: middle;
}

li > span {
  display: block;
}

li:not(:nth-of-type(2)),
li > span {
  border: 2px solid black;
  margin: 4px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

它简单，快速，并且不需要任何奇怪的定位。

要完全在语义上正确，您应该在技术上使用ol，因为您订购了商品：

  

使用说明：<ol>和<ul>元素均代表商品列表。它们的不同之处在于，使用<ol>元素，顺序是有意义的。根据经验确定使用哪一个，尝试更改列表项的顺序;如果含义发生变化，则应使用<ol>元素，否则可以使用<ul>。

Answer 5

另一种使用flex的方法（因为另一个已经给出了信息）：

ul {
  display:inline-flex;/* or flex + margin:auto for the demo*/
  flex-flow:column;
  flex-wrap:wrap;
  height:6.25em;/* an height is required to force wraping into columns , mind basic margin, padding and lines wanted /set for li */*/
  padding:0;
  margin:0;
  width:25em;/* whatever you want*/
  background:gray;
}
li {
  display:block;/* removes the bullet */
  padding:0.25em;
  border:solid;
  width:32%;
  margin:0.5em;/* whatever, just mind for ul height*/
  box-sizing:border-box;/* includes padding and borders into height calculation  .... */
}
li:first-of-type,li:last-of-type {
  margin:2em 0;/* increase at least margin-top */
}

body {
  text-align:center;/* to center inline-flex-container and li's text */
}

ul:hover {
  font-size:1.25em;/* see behavior when font-size is different */
  }

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