将动态创建的图像对齐到div的右侧

Question

我正在尝试创建购物清单。该列表是使用Javascript（jQueryUI）动态创建的。我希望旁边的罐头在右边（我画的这个蓝点所在的位置）。我尝试使用标签中的left或style="right:350px"和float:right来执行此操作，但是它不起作用。

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9BNUVmaC5wbmcifQ==” alt =“在此处输入图像描述”>“ >>

这是我的生成行的代码：

var row=$('<div class"productsclass" id='+selectedproducts[i]+' style="width:400px">
<label style="font-size:20px">'+selectedproducts[i]+'</label><input type="text" 
name="Quantity" value="1" id='+thesi+'><img class=delete 
src="http://b.dryicons.com/images/icon_sets/handy_part_2_icons/png/128x128/recycle_bin.png"
 height="22" width="22" style="right:350px"></div>'); 
   rowID++;

   $("#productstable").append(row);
这里是html：

<div id="maindiv" class="maindiv">
<input id="autocomplete_text_field">
<button id="add_product_button">Add product</button>
<form action="#" id="productstable" name="productstable">
<p></p>
</form>
</div>
</body>
这里是CSS：

#body{
    background-color: #6E0D25
}

#maindiv {
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    /*border: 1px solid #ccc;*/
    background-color: #6E0D25;
}

#productstable
{
    background-color:#F1EBE4;
    border-radius:10px;
    width:400px;
}

#product
{
    width:380px;
}
#autocomplete_text_field
{
    width:200px;
    height:40px;
    border-radius:10px;

}

#add_product_button
{
    width:200px;
    height:50px;
    border-radius:10px;
}
我该怎么办？（很抱歉，这是一个非常无用的问题，这几乎是我第一次使用CSS）

在user2313440的答案后解决：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9peXE5Yy5wbmcifQ==” alt =“在此处输入图像描述”>

我正在尝试创建购物清单。该列表是使用Javascript（jQueryUI）动态创建的。我希望旁边的罐头在右边（我画的这个蓝点所在的位置）。我尝试过...

Answer 1

将img class=delete更改为img class="delete"，然后在CSS中添加float:right;。

Answer 2

只是对您的img进行简单的重新排列，并使用float：right;