在div中水平（一行）顯示元素

Question

這是我的div ：

 <div class="PictureContent1" style="display:inline-block" value="1"> </div> 

這是內容：

for(var i = 0; i<ui.item.productpictureurl.length; i++){
                        $('div.PictureContent1').append("<img width='100px' height='100px' src='" + ui.item.productpictureurl[i] + "' />");
                        var radioBtn = '<input type="radio" name="'+ui.item.label+'" data-urlId="'+ui.item.productpictureurl[i]+'" />';
                        $('div.PictureContent1').append(radioBtn);                                  
                    }

我需要在此div中一行顯示<img>和radiobuttons 。 誰能幫我？

Answer 1

將此CSS添加到您的HTML .PictureContent1 img{ float:left}或將代碼更改為

    for(var i = 0; i<ui.item.productpictureurl.length; i++){
$('div.PictureContent1').append("<div style='float:left'>");
                            $('div.PictureContent1').append("<img width='100px' height='100px' src='" + ui.item.productpictureurl[i] + "' />");
                            var radioBtn = '<input type="radio" name="'+ui.item.label+'" data-urlId="'+ui.item.productpictureurl[i]+'" />';
                            $('div.PictureContent1').append(radioBtn); 
$('div.PictureContent1').append("</div>");                                 
                        }

Answer 2

您可以添加float: left他們，以解決您的問題，但由於不會清除浮點數，因此會出現另一個問題，因此這些圖像后面的代碼看起來有問題。

調查清理浮球 。