glendon philipp baculio glendon philipp baculio - 5 months ago 8
CSS Question

How to display put a button below inline block element?

I am trying to display a button just below a inline block element?

image I want to put the button just below the title?

this is my code:

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


I dont know why but i cannot do top right buttom left positioning on the button?

Answer

First let me start by saying that it is best to have your styles in a stylesheet not inline. anyways to use the "top right bottom left" you should have position: relative , absolute, or fixed.
In your case I would advice using position: relative for the li and then you could use position: absolute relatively to the container

Comments