我想在一行中包含 3 个元素.. 一个用于步骤编号的圆形图标、标题和最右侧的一个可选图标,由一条垂直线分隔。
问题出在底部边框上。因为底部边框“放大”了元素,垂直边框和底部边框之间的边框底部有一个间隙......(事实上,在我的生产代码中,悬停时的边框底部确实与容器的底部边框,然而,垂直边框在底部仍然有一个间隙,等于图标按钮底部边框的厚度。
请看下面的 fiddle :
http://codepen.io/anon/pen/wdvVBX
HTML
<div class="step-container">
<h2 class="step-title">
<div class="round-icon">
3
</div>
<span class="title">Migration</span>
</h2>
<div class="icon-button">
<i class="fa fa-print"></i>
</div>
</div>
CSS
* { margin: 0; padding: 0;}
.step {
}
.step-container {
display: block;
box-sizing: border-box;
border-bottom: 1px solid #ddd;
}
.step-title {
display: inline-block;
padding: 2rem 0 2rem 2rem;
}
.round-icon {
display: inline-block;
background-color: black;
color: white;
width: 2rem;
height: 2reml;
line-height: 2rem;
font-size: 1rem;
border-radius: 50%;
text-align: center;
}
.title {
margin-left: 1rem;
display: inline-block;
vertical-align: middle;
}
.icon-button {
float: right;
padding: 2rem;
border-left: 1px solid #ddd;
font-size: 1.5rem;
height: 100%;
}
.icon-button:hover {
border-bottom: 4px solid black;
}
最佳答案
您可以使用 ::after
伪元素代替边框。
http://codepen.io/meecrobe/pen/pPoMZo
关于html - css:悬停时具有不同边框的内联元素,奇怪的对齐方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43394624/