Как правильно отображать значки слева от аудиоплеера html?

Я пытаюсь показать свои значки слева от моего аудиоплеера (в конце). Встроенный блок не работает. Даже в JSfiddle. Какие-либо предложения?Как правильно отображать значки слева от аудиоплеера html?

Я ценю это!

Текущий код/CSS У меня есть (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; 
}

источник

<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

перемещение '-paypal' Регионы Местные DIV над' audio'? – 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, который вы связали в своем исходном сообщении.)

источник

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?

ответ

Смежные вопросы