gpt4 book ai didi

html - 如何使用 CSS 显示时间轴

转载 作者:行者123 更新时间:2023-11-28 14:52:51 25 4
gpt4 key购买 nike

我正在创建时间轴,但它没有显示我的设计输出。我必须在图像之后显示第一个 child ,在图像之前显示下一个 child ,并带有完整的下划线。我试过了,但我的下划线没有显示正确甚至图像显示不正确

你能帮我解决这个问题吗?我需要这样的输出。 enter image description here

.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>

最佳答案

这不是完美的或动态的,但它会让您走上正确的道路。使用 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>

关于html - 如何使用 CSS 显示时间轴,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51416643/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com