如何正確顯示html音頻播放器左側的圖標？

我試圖讓我的圖標出現在我的音頻播放器的左側（最後）。內聯塊不起作用。甚至在JSfiddle中也沒有。有什麼建議麼？如何正確顯示html音頻播放器左側的圖標？

我很感激！

當前的代碼/ CSS我（的jsfiddle）：

的CSS

.socials-paypal i { 

    width: 37px; 
    height: 37px; 
    float:left; 
    -webkit-border-radius: 50%; 
    border-radius: 50%; 
    background-color: #1b1b1b; 
    color: #dbdbdb; 
    line-height: 37px; 
    text-align: center; 
    font-size: 14px; 
    -webkit-transition: all 0.3s ease-in-out; 
    -moz-transition: all 0.3s ease-in-out; 
    -ms-transition: all 0.3s ease-in-out; 
    -o-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out; 
}

源

<body> 
<div> 
    <h1 class="text-center">'Zel</h1><br> 
    <audio src="audioplayer/audio/letmeknow.mp3" controls> 
     Your browser does not support the audio element. 
    </audio> 

<div class="socials-paypal"> 
    <a href="facebook.com/TheRealZellyZel"><i class="fa fa-paypal"></i></a> 
    <a href="Twitter.com/TheRealZellyZel"><i class="fa fa-twitter"></i></a> 
    <a href="Twitter.com/TheRealZellyZel"><i class="fa fa-twitter"></i></a> 
<div class="footer-socials"></div>

來源

2016-12-28 adr5194

舉動''以上社交audio'，paypal' DIV？ – kukkuz

只需添加display: inline-block您socials-paypal類，並重新訂購您的DOM。就像這樣：

audio { 
 
     display: inline-block; 
 
    } 
 
    .socials-paypal i { 
 
     width: 37px; 
 
     height: 37px; 
 
     float: left; 
 
     display: inline-block 
 
     -webkit-border-radius: 50%; 
 
     border-radius: 50%; 
 
     background-color: #1b1b1b; 
 
     color: #dbdbdb; 
 
     line-height: 37px; 
 
     text-align: center; 
 
     font-size: 14px; 
 
     -webkit-transition: all 0.3s ease-in-out; 
 
     -moz-transition: all 0.3s ease-in-out; 
 
     -ms-transition: all 0.3s ease-in-out; 
 
     -o-transition: all 0.3s ease-in-out; 
 
     transition: all 0.3s ease-in-out; 
 
    } 
 
    .socials-paypal { 
 
     display: inline-block; 
 
    }

<div> 
 
      <h1 class="text-center">'Zel</h1> 
 
      <br> 
 
      <div class="socials-paypal"> 
 
       <a href="facebook.com/TheRealZellyZel"><i class="fa fa-paypal"></i></a> 
 
       <a href="Twitter.com/TheRealZellyZel"><i class="fa fa-twitter"></i></a> 
 
       <a href="Twitter.com/TheRealZellyZel"><i class="fa fa-twitter"></i></a> 
 
       <div class="footer-socials"></div> 
 
      </div> 
 
      <audio src="audioplayer/audio/letmeknow.mp3" controls> 
 
       Your browser does not support the audio element. 
 
      </audio> 
 
      </div>

來源

2016-12-28 04:29:31

如果你可以移動<div class=socials-paypal">與<audio src="audioplayer/audio/letmeknow.mp3" controls>前的所有內容，你最終會與你正在尋找我的想法。

我提供了一個jsfiddle的更新。 http://jsfiddle.net/qMdfC/622/（如阿里納斯，你已經錯過了「;」在您在原來的職位掛鉤的jsfiddle您的inline-block的結束。）

來源

2016-12-28 04:31:20

這是您的DIV和音頻標籤的排序問題。只要改變它是這樣的：

.socials-paypal i { 
 
    width: 37px; 
 
    height: 37px; 
 
    float: left; 
 
    display: inline-block; 
 
    -webkit-border-radius: 50%; 
 
    border-radius: 50%; 
 
    background-color: #1b1b1b; 
 
    color: #dbdbdb; 
 
    line-height: 37px; 
 
    text-align: center; 
 
    font-size: 14px; 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    -moz-transition: all 0.3s ease-in-out; 
 
    -ms-transition: all 0.3s ease-in-out; 
 
    -o-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
}

<body> 
 
    <div> 
 
    <h1 class="text-center">'Zel</h1> 
 
    <br> 
 
    <div class="socials-paypal"> 
 
     <a href="facebook.com/TheRealZellyZel"><i class="fa fa-paypal"></i></a> 
 
     <a href="Twitter.com/TheRealZellyZel"><i class="fa fa-twitter"></i></a> 
 
     <a href="Twitter.com/TheRealZellyZel"><i class="fa fa-twitter"></i></a> 
 
     <div class="footer-socials"></div> 
 
    <audio src="audioplayer/audio/letmeknow.mp3" controls> 
 
     Your browser does not support the audio element. 
 
    </audio>

jsfiddle

來源

2016-12-28 04:32:30 Advaith

如何正確顯示html音頻播放器左側的圖標？

回答

相關問題