How to CSS a two column list of items?

前端 未结 7 767
萌比男神i
萌比男神i 2021-01-04 03:39

I need to display a two column list of items according to the following rules:

  • Container for the columns has fluid width
  • Width of both columns needs t
7条回答
  •  野趣味
    野趣味 (楼主)
    2021-01-04 04:13

    You could try something like:

    .option:nth-of-type(n+5) {
        position: relative;
        left: 14ex;
        top: -6em;
    }
    
    .option:nth-of-type(n+9) {
        color: red;
        left: 28ex;
        top: -12em;
    }
    

    ... for four items a column, where line-height is 1.5em and column width will be 14ex.

    But because this uses relative positioning, you'll probably have to reduce the size of the container.

    Also, according to w3schools, this property isn't available in IE8 or lower.

提交回复
热议问题