显示内联不起作用[全部在一行]

Question

我想在left right span和audio的一行中显示！我试过display:inline没有工作！电流一行显示

＆＃13;

＆＃13;

   div{
        margin: 20% 0;
        width: 100%;
        height: 50%;
        background: silver;
    }
    audio{
        margin: 20% 0;
        width: 100%;
        height: auto;
    }
    .left,.right{
        height: 10%;
        width: 10%;
        text-align: center;
        background: #af9380;
        font-size: 40px;
        cursor : pointer;
        margin-top: 10%;
        position: relative;        
    }
    .left{
        float: left;
    }
    .right{        
        float: right;
    }

＆＃13;

<div>
    <span class="left"><</span>
    <audio controls><source src="Lesson6.mp3"></audio>
    <span class="right">></span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用Flexbox

＆＃13;

＆＃13;

div {
  display: flex;
  align-items: center;
  background: silver;
  padding: 100px 0;
}
audio {
  flex: 1;
}
.left,
.right {
  height: 50px;
  line-height: 50px;
  width: 50px;
  background: #af9380;
  text-align: center;
  font-size: 40px;
  cursor: pointer;
}

＆＃13;

<div>
  <span class="left">&#8701;</span>
  <audio controls><source src="Lesson6.mp3"></audio>
  <span class="right">&#8702;</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

第一个音频的宽度为100％，因此它们不会在一行中。并且音频的两侧都有4px填充，因此如果左侧和右侧的宽度为10％，则宽度应为80% - 8px。

＆＃13;

＆＃13;

     div{
        width: 100%;
        height: 50%;
        background: silver;
    }
    audio{
        width:calc(80% - 8px);
        height: auto;
        display:inline-block;
    }
    .left,.right{
        height: 10%;
        width: 10%;
        text-align: center;
        background: #af9380;
        font-size: 40px;
        cursor : pointer;
        margin-top: 10%;
        position: relative;   
        display:inline-block;     
    }
   

＆＃13;

<div>
    <span class="left"><</span>
    <audio controls><source src="Lesson6.mp3"></audio>
    <span class="right">></span>
</div>

＆＃13;

＆＃13;

＆＃13;