表示インライン私は<code>left right span</code>と<code>audio</code>という1行で表示したい[すべて1行で]

Question

に動作していません！私は試みたdisplay:inlineは動作しません！現在は1あなたは、彼らがされませんのでFlexbox

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

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

Answer 1

で1行で表示されます一行でまた、オーディオは両サイドに4pxのパディングがありますので、左右が10％の場合、幅は80% - 8pxになります。

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

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

Answer 2

まずオーディオは100％の幅を持って使用することができます

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

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