如何在 html 音频播放器的左侧正确显示图标？

Question

我正在尝试让我的图标显示在我的音频播放器的左侧（最后）。内联块不起作用。甚至在 JSfiddle 中也不行。有什么建议吗？

非常感谢！

当前code/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>

Answer 1

只需将 display: inline-block 添加到您的 class 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>

Answer 2

如果您可以将 <div class=socials-paypal"> 及其所有内容移动到 <audio src="audioplayer/audio/letmeknow.mp3" controls> 之前，我想您最终会得到您想要的东西。

我提供了一个带有更新的 jsfiddle。 http://jsfiddle.net/qMdfC/622/（作为旁注，您在原始 post 中链接的 jsfiddle 内联块的末尾错过了一个“;”。）

Answer 3

这是您对 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

如何在 html 音频播放器的左侧正确显示图标？

How to properly display icons to the left of html audio player?

html

css

icons

inline