显示第一行的箭头，即使有换行符

基本上，我想要的结果如下所示，箭头显示在第一行。显示第一行的箭头，即使有换行符

但是从代码我这样做，箭头下文中转到第二行，如果文本大于框的宽度更长。

我不知道如何修改我的代码，希望你们中的一些人能够给我提供一些建议。谢谢！

请注意箭头如何动画。谢谢！

ul { list-style-type: none; margin:0; padding: 0; } 
 
.EScontent-training { position: relative; width: 302px; height: 320px; margin: 0 17px; opacity: 0.9;} 
 
.tracol{ background: rgba(220, 206, 185, 1);} 
 
.EScontent{padding: 27px 22px;} 
 
.EScontent ul{padding: 45px 0;} 
 
.EScontent ul li{padding: 8px 0;} 
 
.tracol .EScontent ul li a{color:#fff; text-decoration: none; padding-right: 25px; background: url('https://image.ibb.co/gXg3ea/arrow_training.png') no-repeat top 50% right 0;} 
 
.tracol .EScontent ul li a:hover{color:#5f5d5d; text-decoration: none; padding-right: 38px; background: url('https://image.ibb.co/j59Oea/arrow_training_hover.png') no-repeat top 50% right 0;}

<div class="EScontent-training"> 
 
\t <div class="color-overlay tracol"> 
 
    <div class="EScontent"> 
 
     <div class="title text_grey2_24_bold_uppercase">Lorem ipsum dolor sit amet</div> 
 
     <ul> 
 
     <li><a href="">Sed consectetur dolor et elit Accreditation</a></li> 
 
     <li><a href="">Duis aliquet dui eget dui suscipit</a></li> 
 
     <li><a href="">Vivamus pharetra mi a sem condimentum</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-07-03 Eelyn

制作使用了锂项目的伪元素，更新你的CSS

CSS

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 
.EScontent-training { 
    position: relative; 
    width: 302px; 
    height: 320px; 
    margin: 0 17px; 
    opacity: 0.9; 
} 
.tracol { 
    background: rgba(220, 206, 185, 1); 
} 
.EScontent { 
    padding: 27px 22px; 
} 
.EScontent ul { 
    padding: 45px 0; 
} 
.EScontent ul li { 
    padding: 8px 0; 
    position: relative; 
    display:inline-block; 
} 

.tracol .EScontent ul li::after{ 
    content:""; 
    background: url('https://image.ibb.co/gXg3ea/arrow_training.png') no-repeat top 50% right 0; 
    position: absolute; 
    top:6px; 
    right:0; 
    height:25px; 
    width:25px; 
} 
.tracol .EScontent ul li:hover::after { 
    color: #5f5d5d; 
    text-decoration: none; 
    padding-right: 38px; 
    background: url('https://image.ibb.co/j59Oea/arrow_training_hover.png') 
    no-repeat 
    top 
    50% 
    right 
    0; 
} 

.tracol .EScontent ul li a { 
    color: #fff; 
    text-decoration: none; 
    padding-right: 25px; 
    position: relative; 
}

希望这有助于..

来源

2017-07-03 08:53:02

OP不要求箭齐平权。 – sol

已更新css .. make将此css规则添加到li显示中：inline-block; –

嗨，谢谢你的回答，请注意箭头如何动画。你能否改变你的代码？ – Eelyn

这里是另一个方法

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 

.EScontent-training { 
    position: relative; 
    width: 302px; 
    height: 320px; 
    margin: 0 17px; 
    opacity: 0.9; 
} 

.tracol { 
    background: rgba(220, 206, 185, 1); 
} 

.EScontent { 
    padding: 27px 22px; 
} 

.EScontent ul { 
    padding: 45px 0; 
} 

.EScontent ul li { 
    padding: 8px 0; 
    display: flex; 

} 

.tracol .EScontent ul li a { 
    color: #fff; 
    text-decoration: none; 
} 

.tracol .EScontent ul li span { 
    background: url('https://image.ibb.co/gXg3ea/arrow_training.png') no-repeat top 50% right 0; 
    display: block; 
    width: 20px; 
    height: 20px; 
    margin-left: 5px; 
} 

.tracol .EScontent ul li:hover span { 
    /*background: url('https://image.ibb.co/j59Oea/arrow_training_hover.png') no-repeat top 30% right 0;*/ 
    background: url('https://image.ibb.co/j59Oea/arrow_training_hover.png') no-repeat top 50% right 0; 
    display: block; 
    min-width: 20px; 
    min-height: 20px; 
} 

.tracol .EScontent ul li a:hover { 
    color: #5f5d5d; 
    text-decoration: none; 
}

https://jsfiddle.net/cohd4qqb/

来源

2017-07-03 09:04:30

嗨，谢谢你的回答，请注意箭头如何动画。你能否改变你的代码？ – Eelyn

显示第一行的箭头，即使有换行符

回答

相关问题