Anzeige inline funktioniert nicht [alle in einer Zeile]

-1

Ich möchte in einer Zeile anzeigen, dass left right span und audio! Ich habe versucht mit nicht arbeiten! Der Strom wird durch eineAnzeige inline funktioniert nicht [alle in einer Zeile]

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>

Quelle

2016-05-13 David JorHpan

Breite von '' audio' 100% 'ist. Stellen Sie es auf 80% um Ihr Problem zu lösen. – Mohammad

1) In Ihrem Code gibt es kein 'display: inline'. 2) Ich denke du willst 'display: inline-block'. 3) Ihr Audio-Element verwendet 'width: 100%', also wie erwarten Sie, dass 120% der Linienbreite in dieselbe Zeile passen? – CherryDT

Ich sagte ich hätte es mit Inline versucht! Arbeite nicht, schreibe nicht dort –

Sie können 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>

Quelle

2016-05-13 10:42:24

Erste Audio haben 100% Breite in einer Zeile Anzeige, so dass sie nicht sein in einer Zeile. Und Audio hat 4px Polsterung für beide Seiten, so dass die Breite 80% - 8px sein sollte, wenn die linke und rechte 10% sein wird.

 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>

Quelle

2016-05-13 10:44:40 jackjop

Anzeige inline funktioniert nicht [alle in einer Zeile]

Antwort

Verwandte Themen