當(dāng)我將鼠標(biāo)懸停在這兩個(gè)元素上時(shí),我試圖使<div>它們對(duì)齊,但到目前為止還沒(méi)有奏效。我嘗試過(guò)使用display: inline-block,但它仍然不起作用,如圖所示。代碼中的另一件事是懸停區(qū)域是錯(cuò)誤的。關(guān)于如何解決這些問(wèn)題有什么想法嗎?這是我的代碼:/* Please note that this is updated CSS and not * the original */@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital@0;1&display=swap');* { font-family: "Montserrat", sans-serif; background-color: #121212; transition: 0.5s; overflow: hidden;}#c { position: absolute; left: calc(4vw + 4vh); top: calc(4vw + 4vh); transition: 0.5s; display: inline-flex; cursor: default; /* V3 of the CSS */ overflow: hidden;}#ct { overflow: hidden; width: 0; top: 0; left: 0; right: 0; transition: 0.5s ease; /* display: inline-block; Removed in Revision 3 */}#c:hover #ct { width: 100%;}#ct span { white-space: nowrap; transition: inherit; display: inline-block; font-size: calc(2vw + 2vh); color: rgb(100, 100, 100); padding-top: 3.5px;}#h { position: relative; display: inline-block; transition: 0.5s; font-size: calc(2vw + 2vh); color: rgb(100, 100, 100); background: rgb(50, 50, 50); padding: 3.5px; border-radius: 5px;}<div id='c'> <div id='ct'> <span>lorem ipsum dolor... </span> </div> <span id='h'>?</span></div><div>更新:使用和修復(fù)了對(duì)齊錯(cuò)誤<span>,但懸停錯(cuò)誤仍然存在。更新2:錯(cuò)誤已完全修復(fù)。謝謝茲德拉夫科·佩爾尼科夫!
1 回答

白板的微信
TA貢獻(xiàn)1883條經(jīng)驗(yàn) 獲得超3個(gè)贊
使用display: inline-flex
in#c
和 addalign-items: center
可以垂直對(duì)齊它們。
對(duì)于懸停 - 添加和overflow: hidden
刪除并更改為display: inline-block;
#c
#ct
width: 0%
width: 0
- 1 回答
- 0 關(guān)注
- 123 瀏覽
添加回答
舉報(bào)
0/150
提交
取消