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

あなたは私が考えるためにあなたが探していたものとなってしまいます<audio src="audioplayer/audio/letmeknow.mp3" controls>前に、すべてのコンテンツと<div class=socials-paypal">を移動することができます。

私はアップデートでjsfiddleを提供しました。 http://jsfiddle.net/qMdfC/622/（あなたの元の投稿にリンクされているjsfiddleのインラインブロックの末尾に ";"がありませんでした）

出典

2016-12-28 04:31:20

divタグとaudioタグの順序が問題でした。

.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オーディオプレーヤーの左側にアイコンを正しく表示する方法は？

答えて

関連する問題