我正在创建时间轴,但未显示我的设计输出。我必须在图像后显示第一个孩子,并在图像前显示下一个孩子,并带有完整的下划线。我尝试过,但是我的下划线没有显示正确的偶数图像,所以显示不正确
.timeline ul li {
list-style-type: none;
position: relative;
width: 6px;
margin: 0 auto;
padding-top: 50px;
/* background: #fff;*/
border-right: 2px solid #ff0000;
}
.timeline ul li::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 30px;
height: 30px;
background: inherit;
}
.timeline ul li:nth-child(odd),
.timeline ul li:nth-child(even){
width:50%;
float:left;
clear:right;
text-align:right;
position:relative;
}
.timeline ul li:nth-child(even){
width:50%;
float:right;
clear:left;
text-align:left;
position:relative;
}
.timeline ul li:nth-child(odd):after,
.timeline ul li:nth-child(even):before{
background: url('https://image.flaticon.com/icons/png/512/67/67347.png') no-repeat;
width: 24px;
height: 20px;
background-size: 100% 100%;
}
<div class="timeline">
<ul>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
</ul>
</div>
答案 0 :(得分:1)
这不是完美的或动态的,但它将使您走上正确的道路。
使用nth-child(odd/even)
选择第二行
li:nth-child(odd) {
float: left;
border-right: thick solid #ff0000;
margin: 0px;
padding-right: 20px;
background-image: url('https://image.flaticon.com/icons/png/512/67/67347.png');
background-repeat: no-repeat;
background-size: 20px 20px;
background-position-x: 254px;
background-position-y: 18px;
}
li:nth-child(even) {
float: right;
border-left: thick solid #ff0000;
margin-right: 186px;
padding-left: 20px;
background-image: url('https://image.flaticon.com/icons/png/512/67/67347.png');
background-repeat: no-repeat;
background-size: 20px 20px;
background-position-y: 18px;
}
ul{
list-style: none;
}
li{
padding: 20px 0 0 0;
}
div{
width: 777px;
}
img{
width: 20px;
}
<div class="timeline">
<ul>
<li>
<a href="">Lorem ipsum dolor sit amet, consectetu</a>
</li>
<li>
<a href="">Lorem ipsum dolor sit amet, consectetu</a>
</li>
<li>
<a href="">Lorem ipsum dolor sit amet, consectetu</a>
</li>
<li>
<a href="">Lorem ipsum dolor sit amet, consectetu</a>
</li>
<li>
<a href="">Lorem ipsum dolor sit amet, consectetu</a>
</li>
</ul>
</div>
答案 1 :(得分:0)
这是我的解决方案:
.timeline ul li {
list-style-type: none;
position: relative;
width: 6px;
margin: 0 auto;
padding-top: 50px;
/* background: #fff;*/
}
.timeline ul li:nth-child(odd) {
border-right: 2px solid #ff0000;
}
.timeline ul li:nth-child(even) {
border-left: 2px solid #ff0000;
}
.timeline ul li::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 30px;
height: 30px;
background: inherit;
}
.timeline ul li:nth-child(odd){
width:50%;
float:left;
clear:right;
text-align:right;
position:relative;
}
.timeline ul li:nth-child(even){
width:49.7%;
float:right;
clear:left;
text-align:left;
position:relative;
}
.timeline ul li:nth-child(odd):after,
.timeline ul li:nth-child(odd):before{
background: url('https://image.flaticon.com/icons/png/512/67/67347.png') no-repeat;
width: 24px;
height: 20px;
background-size: 100% 100%;
}
<div class="timeline">
<ul>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
</ul>
</div>
答案 2 :(得分:0)
您的代码中有几处遗漏或存在错误。
您在同一侧的两个div上都应用了边框。我通过给他们两个不同的边界来解决此问题。
为确保边框被包括在我使用的box-sizing: border-box;
元素的尺寸之内。
与其他一些答案一样,它们变得锯齿状,因此我对50% - half the border size
的元素(即width: calc(50% - 1px)
)应用了宽度。这应该总是一条直线。
您从未确保将显示实际的:before
。因此,我对:after
和:before
应用了相同的规则。
给li
留一点填充物,以免粘在边框上,从而为图像留出一些空间。
以下代码应按您期望的方式工作。至于边距和填充,您当然可以根据需要进行调整。
.timeline ul li {
list-style-type: none;
position: relative;
width: calc(50% + 1px);
margin: 0 auto;
padding-top: 50px;
box-sizing: border-box;
}
.timeline ul li::after, .timeline ul li::before {
position: absolute;
transform: translateX(-50%);
width: 24px;
height: 20px;
content: '';
}
.timeline ul li:nth-child(odd){
float:left;
clear:right;
text-align:right;
border-right: 2px solid #ff0000;
padding-right: 2em;
}
.timeline ul li:nth-child(even){
float:right;
clear:left;
text-align:left;
border-left: 2px solid #ff0000;
padding-left: 2em;
}
.timeline ul li:nth-child(odd):after{
background: url('https://image.flaticon.com/icons/png/512/67/67347.png') no-repeat;
background-size: 100% 100%;
right: -5px;
}
.timeline ul li:nth-child(even):before{
background: url('https://image.flaticon.com/icons/png/512/67/67347.png') no-repeat;
background-size: 100% 100%;
left: 20px;
}
<div class="timeline">
<ul>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
<li><a href="">Lorem ipsum dolor sit amet, consectetu</a></li>
</ul>
</div>
答案 3 :(得分:0)
您可以按以下方式更改CSS
的一部分:Jsfiddle
.timeline ul li:nth-child(1), .timeline ul li:nth-child(2n+1){
width: 50%;
float: left;
clear: right;
text-align: right;
position: relative;
border-right: 5px inset black; //border
left: -5px; //alignment
}
.timeline ul li:nth-child(2n){
width: 50%;
float: right;
clear: left;
text-align: left;
position: relative;
border-left: 5px inset black; //border
}