如何正确显示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音频播放器左侧的图标？

回答

相关问题