Wie werden Symbole auf der linken Seite des HTML-Audioplayers korrekt angezeigt?

Ich versuche, meine Symbole links von meinem Audio-Player erscheinen zu lassen (am Ende). Der Inline-Block funktioniert nicht. Nicht einmal in JFiddle. Irgendwelche Vorschläge?Wie werden Symbole auf der linken Seite des HTML-Audioplayers korrekt angezeigt?

Ich schätze es!

Der aktuelle Code/css Ich habe (JSFiddle):

http://jsfiddle.net/qMdfC/620/

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; 
}

Quelle

<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>

Quelle

2016-12-28 adr5194

Bewegung 'socials-paypal' div über' audio'? – kukkuz

Fügen Sie einfach display: inline-block Ihrer Klasse socials-paypal und re- bestelle dein DOM. Wie folgt aus:

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>

Quelle

2016-12-28 04:29:31

Wenn Sie die <div class=socials-paypal"> mit all seinen Inhalt vor dem <audio src="audioplayer/audio/letmeknow.mp3" controls> bewegen können Sie am Ende mit, was Sie suchen, denke ich.

Ich stellte eine jsfiddle mit dem Update. http://jsfiddle.net/qMdfC/622/ (als Randbemerkung, Sie hatten ein ";" am Ende Ihres Inline-Blocks in der Datei verpasst, die Sie in Ihrem ursprünglichen Beitrag verknüpft haben.)

Quelle

2016-12-28 04:31:20

Es war das Problem Ihrer Bestellung von div und Audio-Tags . einfach ändern sie dies mag:

.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

Quelle

2016-12-28 04:32:30 Advaith

Wie werden Symbole auf der linken Seite des HTML-Audioplayers korrekt angezeigt?

Antwort

Verwandte Themen