HTML/CSS Alignment 問題

Question

我有代碼：

 /* Text */ #hero h1 { margin: 0; font-size: 64px; font-weight: 700; line-height: 56px; /* color: transparent; */ background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat; background-clip: text; -webkit-background-clip: text; } /*Vertical Flip*/.verticalFlip { display: inline; }.verticalFlip span { animation: vertical 5s linear infinite 0s; -ms-animation: vertical 3.5s linear infinite 0s; -webkit-animation: vertical 5s linear infinite 0s; /* color: transparent; */ background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat; background-clip: text; -webkit-background-clip: text; opacity: 0; }.verticalFlip span:nth-child(1) { animation-delay: 2.5s; -ms-animation-delay: 2.5s; -webkit-animation-delay: 2.5s; } /*Vertical Flip Animation*/ @-moz-keyframes vertical { 0% { opacity: 0; } 5% { opacity: 0; -moz-transform: rotateX(180deg); } 10% { opacity: 1; -moz-transform: translateY(0px); } 25% { opacity: 1; -moz-transform: translateY(0px); } 30% { opacity: 0; -moz-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes vertical { 0% { opacity: 0; } 5% { opacity: 0; -webkit-transform: rotateX(180deg); } 10% { opacity: 1; -webkit-transform: translateY(0px); } 25% { opacity: 1; -webkit-transform: translateY(0px); } 30% { opacity: 0; -webkit-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes vertical { 0% { opacity: 0; } 5% { opacity: 0; -ms-transform: rotateX(180deg); } 10% { opacity: 1; -ms-transform: translateY(0px); } 25% { opacity: 1; -ms-transform: translateY(0px); } 30% { opacity: 0; -ms-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0; } }

 <section id="hero"> <h1 style="margin-bottom: 16px">Word <div class="verticalFlip"><span> Change</span><span> Text</span></div> </h1> </section

為什么Text后面輸出空格？ 為什么 alignment 關閉？

問題正在發生，因為我刪除position: absolute; 從.verticalFlip span但添加該屬性也會使 alignment 在單詞的某些部分似乎被切割的地方關閉。 我正在嘗試使.verticalFlip span與#hero h1相同。 我怎樣才能做到這一點？ 請問有什么建議嗎？

Answer 1

您對您想要的內容的描述相當模糊，但是如果您希望兩個單詞/跨度在同一個 position 交替出現，請添加position: absolute; 以及可選的.verticalFlip span規則的一些margin-left 。

為了確保這在任何情況下都有效，還要添加position: relative; 到這兩個跨度的父元素（即.verticalFlip div），將其定義為絕對 position 的參考。

 /* Text */ #hero h1 { margin: 0; font-size: 64px; font-weight: 700; line-height: 56px; /* color: transparent; */ background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat; background-clip: text; -webkit-background-clip: text; } /*Vertical Flip*/.verticalFlip { display: inline; position: relative; }.verticalFlip span { position: absolute; margin-left: 0.3em; animation: vertical 5s linear infinite 0s; -ms-animation: vertical 3.5s linear infinite 0s; -webkit-animation: vertical 5s linear infinite 0s; /* color: transparent; */ background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat; background-clip: text; -webkit-background-clip: text; opacity: 0; }.verticalFlip span:nth-child(1) { animation-delay: 2.5s; -ms-animation-delay: 2.5s; -webkit-animation-delay: 2.5s; } /*Vertical Flip Animation*/ @-moz-keyframes vertical { 0% { opacity: 0; } 5% { opacity: 0; -moz-transform: rotateX(180deg); } 10% { opacity: 1; -moz-transform: translateY(0px); } 25% { opacity: 1; -moz-transform: translateY(0px); } 30% { opacity: 0; -moz-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes vertical { 0% { opacity: 0; } 5% { opacity: 0; -webkit-transform: rotateX(180deg); } 10% { opacity: 1; -webkit-transform: translateY(0px); } 25% { opacity: 1; -webkit-transform: translateY(0px); } 30% { opacity: 0; -webkit-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes vertical { 0% { opacity: 0; } 5% { opacity: 0; -ms-transform: rotateX(180deg); } 10% { opacity: 1; -ms-transform: translateY(0px); } 25% { opacity: 1; -ms-transform: translateY(0px); } 30% { opacity: 0; -ms-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0; } }

 <section id="hero"> <h1 style="margin-bottom: 16px">Word <div class="verticalFlip"><span> Change</span><span> Text</span></div> </h1> </section