我盡力將我的問題簡化為一個 mwe。
問題發生在我有一個男性 (♂) 的 ascii 字符的地方，它的行為與表情符號不同。這個問題只發生在 ascii 字符上。容器應該具有 100% 的標題高度，并保持縱橫比為 1。它不會在第一次渲染時這樣做。但是，對.ul-title元素進行了變換，當它在懸停變換后恢復時，以下元素似乎重新計算了高度并調整了寬度。然而，正因為如此，寬度.ul-title，其被設定為max-content改變或東西和內容結束了包裝。
我想要影片效果，而不是換行文字。我想讓.tag所有元素都是方形的。我已經考慮使用 javascript 來硬設定寬度和高度的值，但我覺得應該有一個 css 修復。任何指標表示贊賞
header {
display: flex;
justify-content: space-between;
align-items: center;
}
header ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
gap: 1rem;
}
.ul-title {
position: relative;
transition: transform 1s;
width: max-content;
}
.ul-title:hover {
transform: translate(3px, 0);
}
.ul-title::before,
.ul-title::after {
content: "";
position: absolute;
top: 0;
background: blue;
height: 1px;
transition: transform 1s;
}
.ul-title::before {
width: 100%;
left: 0;
}
.ul-title::after {
width: 10%;
right: 0;
transform: rotate(30deg);
transform-origin: right;
}
header li.tag {
box-shadow: 0 0 1px 0 black;
height: 100%;
aspect-ratio: 1;
}<header>
<ul>
<li class="ul-title">Popular Tags</li>
<li class="tag">♀</li>
<li class="tag">??</li>
<li class="tag">??</li>
<li class="tag">??</li>
</ul>
</header>uj5u.com熱心網友回復：
實際上，沒有一個字符具有所需的框。盡管縱橫比設定為 1，但它們不是方形的。
沒有明確的高度設定。
這完全取決于您需要什么效果，例如，如果添加了具有不同特征的不同圖示，但是此代碼段只是將高度設定為 1.5em 到串列，并通過將 li 元素設定為 flex 來確保每個字符都居中。
header {
display: flex;
justify-content: space-between;
align-items: center;
}
header ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
gap: 1rem;
height: 1.5em;
}
.ul-title {
position: relative;
transition: transform 1s;
width: max-content;
}
.ul-title:hover {
transform: translate(3px, 0);
}
.ul-title::before,
.ul-title::after {
content: "";
position: absolute;
top: 0;
background: blue;
height: 1px;
transition: transform 1s;
}
.ul-title::before {
width: 100%;
left: 0;
}
.ul-title::after {
width: 10%;
right: 0;
transform: rotate(30deg);
transform-origin: right;
}
header li.tag {
box-shadow: 0 0 1px 0 black;
height: 100%;
aspect-ratio: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}<header>
<ul>
<li class="ul-title">Popular Tags</li>
<li class="tag">♀</li>
<li class="tag">??</li>
<li class="tag">??</li>
<li class="tag">??</li>
</ul>
</header>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/388446.html