Question

我正在尝试创建购物清单。该列表是使用Javascript（JquerryUI）动态创建的。我希望旁边的鞭打罐位于右侧（我绘制的这个蓝色点在这里）。我试图在标签中使用left或style="right:350px"和float:right，但它不起作用。

这里是我的代码，其中它的生成行：

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的答案后解决：

Answer 1

变化img class=delete到img class="delete"然后添加float:right;它CSS。

Answer 2

只是简单的重新排列你的img，并使用float：right;

试试这个代码，而不是：

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

rowID++; 

$("#productstable").append(row);