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);