common width to span text

common width to span text

Hello I am working on a project, which I need to use anchor tag with text
and images for this I have used ul tag, but the problem is I want to right
align the image and left align the text inside LI.
here is my code
<div class="button-no-record">
<ul>
<li><a href="#"><span>ADD NEW</span><img
src="images/add_enabled.gif"></a></li>
</ul>
and the css
.button-no-record ul {
display:table-cell;
vertical-align:middle;
}
.button-no-record li{
list-style-type:none;
display:inline-block;
margin-top:10px;
margin-left:5px;
vertical-align:middle;
line-height:29px;
height:29px;
width:103px;
border-radius:8px;
background:#e4e4e4;
color:black;
font-family:Arial;
font-size:.9em;
font-weight:bold;
}
.button-no-record a span {
width:100px;
overflow:hidden;
margin-left:4px;
color:black;
width:40px;
vertical-align:middle;
}
.button-no-record a img{
vertical-align:middle;
}
I want output like this
My Text [Image]
My [Image]
but currenty it is
My Text [Image]
My [Image]