我希望我在這里缺少一些重要的東西inline-flex。
我正在使用display: inline-flex并且元素內 2 項的順序改變了元素與其兄弟元素的對齊方式。
在這種情況下，我有 3 個錨標記，每個標記都有一些文本和一個“圖示”元素。在第二個錨標記上，我將“icon”元素作為第一個子元素，這會導致該元素與其同級錨標記不對齊。
.item {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 8px;
}
.icon {
display: inline-block;
width: 20px;
height: 20px;
background: red;
}<a href="#" class="item">
item
<span class="icon"></span>
</a>
<a href="#" class="item">
<span class="icon"></span>
item
</a>
<a href="#" class="item">
item
<span class="icon"></span>
</a>這是一個顯示問題的 CodePen： https ://codepen.io/Fernker/pen/BaVjvXB
uj5u.com熱心網友回復：
這里有兩個選項：
設定
vertical-align在.item {}選擇器上；您可以使用 valuebottom,middle, ortop... 任何一個適合您的需要。調換“專案”文本的位置和
<span>第二個/中間<a>鏈接中的。
uj5u.com熱心網友回復：
我會將它們包裝在一個 div 中并在這個 div 中使用 align-items:center 。我不是垂直對齊的忠實粉絲。可能會有一些不需要的問題/副作用。當然這取決于你在哪里以及如何使用它，但這里描述了一些問題：https ://christopheraue.net/design/why-vertical-align-is-not-working
.container {
display:flex;
align-items:center;
gap:16px;
}
.item {
display: inline-flex;
gap: 5px;
}
.icon {
display:inline-block;
width: 20px;
height: 20px;
background: red;
}<div class="container">
<a href="#" class="item">
item
<span class="icon"></span>
</a>
<a href="#" class="item">
<span class="icon"></span>
item
</a>
<a href="#" class="item">
item
<span class="icon"></span>
</a>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/525139.html
標籤：htmlcss弹性盒
下一篇：串列項中的css懸停效果高度