2016-04-07 11 views
0

右上隅に<audio>を配置する必要があります。どうやってするの? 私は<object>を試しましたが、オーディオプレーヤーの周りに黒いバーがあります。HTML - オーディオオブジェクトを右上隅に配置する

<!DOCTYPE html> 
 
<head> 
 
    <style> 
 
    </style> 
 
</head> 
 
<center> 
 
    <body style="background-color: brown"> 
 
    <h1 style="color:white; font-size:80px">Hello</h1> 
 
    <p style="font-size:50px">I like <span style="color:green">turtlez</p> 
 
     <audio controls> 
 
     <source src="hello.mp3" align="right" type="audio/mpeg"> 
 
     </audio> 
 
    </body> 
 
</center>

+0

これに答える方法はいくつもありますが、実際にフロントエンドの外観を指定する必要があります。 –

+0

@WesleyLachenalこれは見た目で、赤いオブジェクトを緑色のフィールドに移動したい:http://i.imgur.com/QbAaBQj.png –

答えて

0

このコードを使用してみてください:

audio { 
 
    float: right; 
 
    margin-top:0; 
 
}
<audio controls src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga"> 
 
    Your user agent does not support the HTML5 Audio element. 
 
</audio>

は、あなたのsrcファイルが含まれていることを確認します。 うまくいきます。

+0

これはまさに私が持っているものです...なぜあなたはこれを投稿しますか? –

+0

@監視させていただきました。申し訳ありませんが、私はCSSを添付するのを忘れていました。 オーディオ{ float:right; margin-top:0; } – shinji29

+0

それは右に移動しますが、上に移動しません。( –

1

容器の中にあなたのオーディオ要素を配置し、コンテナを揃えます。

など。

<div class="container"> 
<audio controls> 
    <source src="hello.mp3" align="right" type="audio/mpeg"> 
</audio> 
</div> 

.container { 
max-width:200px; 
position:absolute; 
top:0; 
right:0; 
} 
+0

試みた、変更なし –

関連する問題