我有一个使用箭头显示的列表:after。它可以正常工作,但有时会在每个<li>
内部动态添加多行文本 - 我如何能够使箭头伸展或只是沿着<li>
的高度行进?伪元素上的Css箭头 - 动态适合父代的高度
请参阅fiddle here。第一步有更多的文字,所以箭头不再适合高度。
* {
box-sizing: border-box;
}
#step {
padding: 0;
list-style-type: none;
font-family: arial;
font-size: 12px;
clear: both;
line-height: 1em;
margin: 0;
text-align: center;
display:table;
width: 100%;
}
#step li {
float: left;
padding: 10px 30px 10px 40px;
background: #333;
color: #fff;
position: relative;
width: 30%;
margin: 0 10px;
}
#step li:after {
content: '';
border-left: 16px solid #333;
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
position: absolute;
top: 0;
left: 100%;
z-index: 20;
}
<ul id="step">
<li>Step 1<br/>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ul>
是否有一个动态的解决这个问题?
在此先感谢。
可能的重复[制作一个css三角形/箭头增长时,其父div被调整大小](http://stackoverflow.com/questions/17939571/make-a-css-triangle-arrow-grow-when-its-parent -div-is-resized) –
你会使用JS版本吗? –
我宁愿不要 - 只有根本不能用css完成... :-) – Meek