动态添加一些<span> <！ - span - >，容器外的内容</span>

Question

我应该将“n”<span> </ span>（以显示“n”flaticon-icons）添加到div（我的页面是.php）

这是 div

<div style="width: 100%;" class="div_icone"></div>

这是 div_icon

@media (max-width: 600px) {

    .div_icone {
        overflow: scroll;
        height: 200px;
    }

}

这是 icona_ambiente_lista

.icona_ambiente_lista,{
    cursor: pointer;
    font-family: Flaticon;
    font-size: 30px;
}

这是可行的代码，以及下图中的代码

<div style="width: 100%;" class="div_icone">

    <span class="flaticon-black210 icona_ambiente_lista" style="margin:9px"></span>
    <span class="flaticon-ascendant6 icona_ambiente_lista" style="margin:9px"></span>
    <span class="flaticon-baby67 icona_ambiente_lista" style="margin:9px"></span>
    <span class="flaticon-bedroom2 icona_ambiente_lista" style="margin:9px"></span>
    <span class="flaticon-bicycle12 icona_ambiente_lista" style="margin:9px"></span>
    <span class="flaticon-apple icona_ambiente_lista" style="margin:9px"></span>
    .....                       

 </div>

看到图标很多，我想更快地添加（通过循环），我试试这个

<?php

    $icona = ["black210","ascendant6","baby67","bedroom2","bicycle12","apple","business56","business57","business59","car80","car95","career","clapperboard","clock46","close13","cogs3","dining8","dwelling1","eco5","electronic55","facebook30","family20","family4","film51","fire14","flatscreen","home63","illness","lamp14","laptop44","man204","man77","motorcycle10","personal5","phone16","phone25","plate7","queen9","scooter7","screwdriver3","stair","student13","students3","studio","text87","toolbox3","traffic17","users6","waterdrop1"];

    for($i = 0 ; $i < count($icona) ; $i++){
        echo "<span class='flaticon-".$icona[$i]." icona_ambiente_lista' style='margin:9px'></span>";
    }

?>

或

<script>

    var icona = ["black210","ascendant6","baby67","bedroom2","bicycle12","apple","business56","business57","business59","car80","car95","career","clapperboard","clock46","close13","cogs3","dining8","dwelling1","eco5","electronic55","facebook30","family20","family4","film51","fire14","flatscreen","home63","illness","lamp14","laptop44","man204","man77","motorcycle10","personal5","phone16","phone25","plate7","queen9","scooter7","screwdriver3","stair","student13","students3","studio","text87","toolbox3","traffic17","users6","waterdrop1"];

    for(var i = 0 ; i < icona.length ; i++){
        $(".div_icone").append( "<span class='flaticon-"+icona[i]+" icona_ambiente_lista' style='margin:9px'></span>" );
    }

</script>

但结果就是这个

Answer 1

图标被包装，因为您最初在每行的末尾都有新的换行符。因此，为了获得相同的结果，在循环中添加空格或换行符：

for ($i = 0; $i < count($icona); $i++) {
    // --------------------v
    echo "<span ...></span> ";  // or "\r\n", or PHP_EOL
}