我有一个显示在多列上的列表。每个列表项都是块元素 (display:block),并附加了一些样式(底部有 1px 边框)。目前看起来是这样的:
List item List item List item
--------- --------- ---------
List item List item List item
--------- --------- ---------
List item List item
--------- ---------
我想在每列中第一个项目的顶部添加相同的边框,例如
--------- --------- ---------
List item List item List item
--------- --------- ---------
List item List item List item
--------- --------- ---------
List item List item
--------- ---------
我尝试过 :first-line 和 ::first-line,在这种情况下它们似乎都没有任何作用(可能是因为它不适用于块元素?)
该列表的长度可能会有所不同,因此我无法确定每列中有多少项目,因此我也无法使用 :nth-of-type() 。
有谁知道这是否可以做到(或者相反,如果绝对不能做到?)
My HTML
<ul>
<li><a href="">List item</a></li>
<li><a href="">List item</a></li>
<li><a href="">List item</a></li>
...
</ul>
My 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;
}
看到代码1小时后编辑:完毕!用纯CSS!
因为我不想使用 javascript,所以花了我很长时间。这是幕后真正发生的事情的演示http://jsfiddle.net/mEtF6/1/ http://jsfiddle.net/mEtF6/1/,这是工作版本:http://jsfiddle.net/mEtF6/2/ http://jsfiddle.net/mEtF6/2/。如果您不明白任何内容,请随时询问,因为它没有很好的记录。我实际上必须添加一个 div 来包裹 'ul' 因为overflow: hidden
on 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>
和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;
}
注意:我添加了对<a>
标签,使整个块可点击,而不仅仅是其中的文本。您可以将其逆转。
注 2:仅测试FIREFOX。您可能需要添加一些其他 -webkit 渐变以使其跨浏览器。抱歉,我会把这个肮脏的工作留给你(;我发现了一个明显的错误并询问了这里有关于它的问题 https://stackoverflow.com/q/19302836/938236.
再次,工作演示:http://jsfiddle.net/mEtF6/2/ http://jsfiddle.net/mEtF6/2/.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)