インラインブロック要素の下にボタンを表示するにはどうすればいいですか？

Question

インラインブロック要素のすぐ下にボタンを表示しようとしていますか？

image私はタイトルの下にボタンを配置したいですか？

これは私のコードです：

function(data) { 
       var output; 
       $.each(data.items, function(i,item) { 
        console.log(item); 
        videTitle = item.snippet.title; 
        videoId = item.snippet.resourceId.videoId; 
        output = '<li style="margin-bottom: 5%;"><img style="display:inline; margin-right: 2%;" src="http://img.youtube.com/vi/'+videoId+'/hqdefault.jpg" width="150" class="img img-responsive" /><span style="font-size:16px;">'+videTitle+'</span><div class="buttons" style="position:absolute; margin: 1%;"><a class="bn btn-success" style="padding:3px;" href="https://www.youtube.com/watch?v='+videoId+'\">'+"Watch on Youtube"+'</a><a class="bn btn-primary" style="padding:4px; margin-left: 10px;" href="https://www.youtube.com/watch?v='+videoId+'\">'+"Convert to MP3"+'</a></div></li>'; 
        $('#results').append(output); 
       }) 
      } 

は、私はなぜ知らないが、私はボタンの位置を左右上湖底を行うことはできませんか？

Answer 1

まず、私はそれがスタイルシートではない、インラインであなたのスタイルを持っていることが最善であるということから始めましょう。とにかくあなたはposition: relative、絶対、または固定している必要があります "右上の左下"を使用する。あなたのケースで
は私がliためposition: relativeを使用してアドバイスうと、あなたは、uがより良く理解するために、質問のためのフィドルを作成してくださいすることができ、コンテナ