Rails 5:javascript预览和删除图像，水平对齐预览图片

我已经在rails应用程序上实现了一个

javascript

预览和删除附件。但是预览图片的显示方式不对，我希望它们以水平对齐方式显示，而不是像现在这样以垂直对齐方式显示：

这是我的设置：

<script>
window.onload = function(){

    //Check File API support
    if(window.File && window.FileList && window.FileReader)
    {
        var filesInput = document.getElementById("files");

        filesInput.addEventListener("change", function(event){

            var files = event.target.files; //FileList object
            var output = document.getElementById("result");

            for(var i = 0; i< files.length; i++)
            {
                var file = files[i];

                //Only pics
                if(!file.type.match('image'))
                    continue;

                var picReader = new FileReader();

                picReader.addEventListener("load",function(event){

                    var picFile = event.target;

                    var div = document.createElement("div");

                    div.innerHTML = ['<img class="thumb" src="', picFile.result, '" title="', picFile.name, '"/><span class="remove_img_preview"></span>'].join('');



                    output.insertBefore(div,null);
                    div.children[1].addEventListener("click", function(event){
                        div.parentNode.removeChild(div);
                    });

                });

                //Read the image
                picReader.readAsDataURL(file);
            }

        });
    }
    else
    {
        console.log("Your browser does not support File API");
    }
}
</script>

---

有没有关于如何将预览图片水平对齐并彼此相邻的想法？

在这些情况下，将div元素替换为span

var div=document.createElement（“div”）

div.innerHTML=[''）.join（''）；
output.insertBefore（div，null）；
div.children[1]。addEventListener（“单击”），函数（事件）{
div.parentNode.removeChild（div）；

div使代码块的宽度增加100%，而span则采用特定的内容宽度

<div class="form-group">
          <label class="btn btn-default">Add images<span style="display:none;">
           <%= form.file_field :attachments, multiple: true, id: "files" %></span></label>
        </div>

        <div class="image-box">
          <div id="result"></div>
        </div>
        &nbsp;
        <div class="form-group">
          <%= form.submit :class=>"btn btn-primary" %>
  <% end %>
        </div>

.image-box
  text-align: center
  font-size: 18px
  margin: auto
  width: auto
  height: auto

.thumb
  width: 90px
  height: 90px
  margin: 0.2em -0.7em 3 0


.remove_img_preview
  position: relative
  top: -25px
  right: 5px
  background: black
  color: white
  border-radius: 50px
  font-size: 0.9em
  padding: 0 0.3em 0
  text-align: center
  cursor: pointer


.remove_img_preview:before
  content: "×"

            div.innerHTML = ['<img class="thumb" src="', picFile.result, '" title="', picFile.name, '"/><span class="remove_img_preview"></span>'].join('');



            output.insertBefore(div,null);
            div.children[1].addEventListener("click", function(event){
                div.parentNode.removeChild(div);