设置css列中第一个项目的样式

Question

设置css列中第一个项目的样式

我有一个显示在多列上的列表.每个列表项都是块元素(显示:块)并且附加了一些样式(底部有1px边框).它目前看起来像这样:

List item    List item    List item
---------    ---------    ---------
List item    List item    List item
---------    ---------    ---------
List item    List item
---------    ---------

Run Code Online (Sandbox Code Playgroud)

我想在每列的第一个项目的顶部添加一个相同的边框,例如

---------    ---------    ---------    
List item    List item    List item
---------    ---------    ---------
List item    List item    List item
---------    ---------    ---------
List item    List item
---------    ---------

Run Code Online (Sandbox Code Playgroud)

我试过了:第一行和::第一行,在这个实例中似乎没有任何东西(可能是因为它不适用于块元素？)

列表的长度可能不同,因此我无法确定每列中有多少项,因此我无法使用:nth-of-type().

有人知道这是否可以做到(或相反,如果它肯定不能？)

我的HTML

<ul>
  <li><a href="">List item</a></li>
  <li><a href="">List item</a></li>
  <li><a href="">List item</a></li>
  ...
</ul>

Run Code Online (Sandbox Code Playgroud)

我的CSS

  ul {
    list-style: none;
    padding: 21px;
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    -moz-column-gap: 21px;
    -webkit-column-gap: 21px;
    column-gap: 21px;
  }
  li {
    display: block;
    -moz-column-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    -mx-column-break-inside: avoid;
    column-break-inside: avoid;
    padding: 1em 0;
    border-bottom: 1px dotted #000;
  }

Run Code Online (Sandbox Code Playgroud)

Answer 1

Fra*_*cia 5

看到代码后进行编辑，一小时后：完成！使用纯CSS！

由于我不想使用javascript，花了我一段时间。这是http://jsfiddle.net/mEtF6/1/幕后真实演示，这是工作版本：http : //jsfiddle.net/mEtF6/2/。如果您对任何内容一无所知，请随时询问，因为它的记录不充分。我实际上必须添加一个包裹'ul'的div，因为overflow: hiddenon的ul行为不会像border-top元素外部的那样。这是工作代码：

<div>
  <ul>
    <li><a href="">List item 1</a></li>
    <li><a href="">List item 2</a></li>
    <li><a href="">List item 3</a></li>
    <li><a href="">List item 4</a></li>
    <li><a href="">List item 5</a></li>
    <li><a href="">List item 6</a></li>
    <li><a href="">List item 7</a></li>
    <li><a href="">List item 8</a></li>
    <li><a href="">List item 9</a></li>
  </ul>
</div>

Run Code Online (Sandbox Code Playgroud)

和CSS：

div {
  /* This will hide the white space at the right (blue in the explanation) */
  overflow: hidden;
  }

ul {
  position: relative; /* Needed to place the :before pseudo element in the proper position */
  list-style: none;
  border-top: 1px dotted #000;
  padding: 0;
  margin: 0;
  -moz-column-count: 4;
  -webkit-column-count: 4;
  column-count: 4;
  -moz-column-gap: 20px;
  -webkit-column-gap: 20px;
  column-gap: 20px;
  }

/* This 'cuts' the top margin of ul so it's displayed in the same way as the other */
ul:before {
  content: " ";
  position: absolute;
  display: block;
  width: 100%;
  height: 1px;

  /* Put the gaps on the <ul> top margin */
  top: -1px;

  /* Background-size = 1/4 of the width + 1/4 of the space between columns */
  background-size: calc(25% + 5px) 1px;

  /* Or it will hide the border-top of the ul */
  background-color: transparent;

  /* The actual white gaps at the top */
  background-image: linear-gradient(
    90deg,
    transparent calc(100% - 20px), /* All the <li> width minus the gap is transparent */
    red 20px);  /* Those 20px are white */
  }

li {
  -moz-column-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  -mx-column-break-inside: avoid;
  column-break-inside: avoid;
  padding: 0;
  border-bottom: 1px dotted #000;
  }

/* This will hide the top margin of the last columns without elements */
li:last-child:before {
  position: absolute;
  /* You want to place the top  */
  margin-left: calc(25% + 5px);
  content: " ";
  display: block;
  background-color: blue;
  width: 10px;
  height: 1px;
  top: -1px;
  width: 100%;
  }

/* Make the <a> fill the whole space of the <li> */
li a {
  display: block;
  padding: 1em 0;
  }

Run Code Online (Sandbox Code Playgroud)

注意：我为<a>标签添加了适当的支持，使整个块都可以单击，而不仅仅是其中的文本。您可以将其逆转。

注意2：~~仅使用FIREFOX进行测试。您可能需要添加一些其他的-webkit渐变以使其跨浏览器。对不起，但是我会把这项肮脏的工作留给您（;~~我发现了一个明显的bug，并在这里对此提出了一个问题。

同样，工作示例：http : //jsfiddle.net/mEtF6/2/。