glendon philipp baculio glendon philipp baculio - 4 months ago 5x
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) {
videTitle = item.snippet.title;
videoId = item.snippet.resourceId.videoId;
output = '<li style="margin-bottom: 5%;"><img style="display:inline; margin-right: 2%;" src="'+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="'+videoId+'\">'+"Watch on Youtube"+'</a><a class="bn btn-primary" style="padding:4px; margin-left: 10px;" href="'+videoId+'\">'+"Convert to MP3"+'</a></div></li>';

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


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