1 - 我建議您使用規則flex。將其添加到您的 CSS 中：#message{ display: flex; align-items: center; justify-content: center;}2 - 從此標簽中刪除styles屬性和樣式p：<p style="margin-bottom:auto;text-align:center;">...</p>3 - 此外，您的span #message標簽是display: inline動態的。您需要在javascript或中禁用此功能jquery?；蛘?important用于：display: flex_#message#message{ display: flex!important; ...}如果您遵循我的回答，那么您的綠色標題的內容會看起來不錯。.ShowHide { overflow: hidden; background-color: #2a4735; color: white;}#left-showing { overflow: hidden;}#right-showing { float: right; width: 30px; text-align: center;}.ShowHide a { color: white; text-decoration: none;}.ShowHide a:hover { text-decoration:underline;}#message{ display: flex; align-items: center; justify-content: center;}@media screen and (max-width: 425px){ #message{font-size:10px;} .shippingimage{display:none;}}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="ShowHide" id="Bar"> <div id="right-showing"> <a href="#" onclick="Hide(Bar);">X</a> </div> <div id="left-showing"> <p> <span id="message"></span></p> <script type="text/javascript"> function nextMsg(index) { if (messages.length === index) { nextMsg(0); } else { $('#message').html(messages[index]).fadeIn(1000).delay(2000).fadeOut(1000, ()=> nextMsg(index+1)); } }; var messages = [ '<img src="https://i.imgur.com/bcq9ydY.png" width="30px" class="shippingimage"><a href="https://www.fermento24.com/pages/spedizione" style="letter-spacing: -0.5px;vertical-align: super;">Consegna gratuita in giornata a Napoli, Caserta e relative province sopra i 25€</a>', '<img src="https://i.imgur.com/pSAQiQp.png" width="35px" class="shippingimage"><a href="https://www.fermento24.com/pages/spedizione" style="vertical-align: super;"> Spedizione gratuita nel resto d’Italia sopra i 120€</a>', ]; $('#message').hide(); nextMsg(0); </script></div></div>
創建與服務器同步的 JavaScript 計時器
忽然笑
2024-01-18 14:51:34
