Question

I have a css issue which I can’t seem to figure out. I have a link to the application [here][1].

To use the app, just select a file (a small file for quick upload) and then click on the “Upload” button to upload the file. What you then see is the name of the file you have uploaded, the delete button and a horizontal line underneath.

But what I want is the name of the file to stay left like it is doing now, move the delete button to align right hand side inside the box and except using a horizontal line can that be replaced by using a dotted line?

Below is the code where the filename, delete button and horizontal line is appended in:

<ul class='listImage' align='left'>

Below is the code which displays the filename, delete button and hozizontal line:

 $('.listImage').append(htmlEncode(imagefilename) + '<button align="right" type="button" class="deletefileimage">Delete</button><br/><hr/>'); 

Below is the current css for the listImage and delete button:

.deletefileimage{
    font-size:12px;
    font-weight:bold;   
}

.listImage{
    font-size:12px;
    text-align:left;
    margin:0;
    padding-left:0;

}  

Answer 1

replace

<button align="right" type="button" class="deletefileimage">Delete</button>

with

<button style="float:right" type="button" class="deletefileimage">Delete</button>