在下面的代码片段中,我有两个相邻的按钮,我希望它们与我当前的CSS对齐。它们都是内联的flex项,这意味着它们应该内联显示(它们确实如此),同时也可以作为flexbox使用。
然而,由于一些无法解释的原因,它们没有正确对齐。它们的高度相等,更改填充没有帮助,据我所知,没有其他属性可以改变元素的位置,但由于某种原因,其中一个被向上推,另一个被向下推。
我知道我可以通过在他们的容器中添加display-flex来解决这个问题,但是,我想弄清楚为什么会发生这种情况,并尝试找到一个没有他们的容器是flexbox的解决方案,因为这对我来说没有意义。
button {
display: inline-flex;
align-items: center;
justify-content: center;
height: 2.5rem;
}
svg {
height: 1rem;
}
<div>
<button>
<span>Some Text</span>
</button>
<button>
<svg viewBox="0 0 320 512"><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg>
</button>
</div>
