Javascript 如何使用jquery水平对齐更多跨距

我正在尝试开发自定义工作表，例如，用户可以浏览和上传特定分区内的更多图像。该图像应该只能在该分区内拖动（我做到了）。在打印图像之前有两个选项，第一个是无序对齐打印，第二个是对齐打印。所以，当用户点击对齐按钮时，所有上传的图像应该在该div内一个接一个地水平对齐

我试过的代码

css.

.draggable { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 0px 0px 0; font-size: .9em; }
.ui-widget-header p, .ui-widget-content p { margin:0px } 
#snaptarget { height: 842px; width:595px;  border:2px solid green; padding: 10px;}

index.jsp

<Input type="button" value="align" onclick="alignment();"> 

<input type="file" id="files" name="files[]" accept="image/gif,image/jpeg"/>
<input type="button" id="p" value="print" onclick="printing();" align="right">
<p id="list"> </p> 

<div id="draggable" class="draggable ui-widget-content">  </div>

<input type="text" value="0" id="textid">

使用下面的代码使用动态id动态创建跨度，

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {
        // Only process image files.
        if (!f.type.match('image.*')) {
            continue;
        }

        var reader = new FileReader();

        var txtval=$('#textid').val();
        addplus1 = 1;
        txtval=parseInt(txtval)+parseInt(addplus1);
        //txtval+=addplus1;
        alert(txtval);
        $('#textid').val(txtval);
        // Closure to capture the file information.
        reader.onload = (function(theFile) {
            return function(e) {
                // Render thumbnail.

                var span = document.createElement('span');
                span.innerHTML = ['<span id="s'+txtval+'" style=" width: 300px;"><ul id="un" class="img-list"><li onclick="getid(this)"><img id="img" class="thumb" src="', e.target.result,
                    '" title=" click this image for deselect" /><span class="text-content"><span>Click here to Drag</span></span></ul></span>'].join('');

                document.getElementById('list').insertBefore(span, null);
            };
        })(f); 

        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
    }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

function alignment() {
    var lengthoftxt=$('#textid').val();

    for(var i=1;i<=lengthoftxt;i++)
    {
        $('#s'+i).each(function() {
            // $(this).css({"marginLeft": "opx"}); 
            $(this).css({"align": "horizontly"}); 
            //how to align horizontly one by one within that div???
        });
    }    
}

$(document).ready(function() {
    $('#textid').val('0');
});

功能手柄文件选择（evt）{
var files=evt.target.files；//文件列表对象
//循环浏览文件列表并将图像文件渲染为缩略图。
for（var i=0，f；f=files[i]；i++）{
//仅处理图像文件。
如果（！f.type.match（'image.*'））{
继续；
}
var reader=new FileReader（）；
var txtval=$（'#textid'）.val（）；
addplus1=1；
txtval=parseInt（txtval）+parseInt（addplus1）；
//txtval+=addplus1；
警报（txtval）；
$（'#textid'）.val（txtval）；
//闭包以捕获文件信息。
reader.onload=（函数（文件）{
返回函数（e）{
//渲染缩略图。
var span=document.createElement（'span'）；
span.innerHTML=['
单击此处拖动；
document.getElementById（'list'）.insertBefore（span，null）；
};
})（f） )；
//作为数据URL读入图像文件。
reader.readAsDataURL（f）；
}
}
document.getElementById（'files'）.addEventListener（'change'，handleFileSelect，false）；

尝试了对齐代码，

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {
        // Only process image files.
        if (!f.type.match('image.*')) {
            continue;
        }

        var reader = new FileReader();

        var txtval=$('#textid').val();
        addplus1 = 1;
        txtval=parseInt(txtval)+parseInt(addplus1);
        //txtval+=addplus1;
        alert(txtval);
        $('#textid').val(txtval);
        // Closure to capture the file information.
        reader.onload = (function(theFile) {
            return function(e) {
                // Render thumbnail.

                var span = document.createElement('span');
                span.innerHTML = ['<span id="s'+txtval+'" style=" width: 300px;"><ul id="un" class="img-list"><li onclick="getid(this)"><img id="img" class="thumb" src="', e.target.result,
                    '" title=" click this image for deselect" /><span class="text-content"><span>Click here to Drag</span></span></ul></span>'].join('');

                document.getElementById('list').insertBefore(span, null);
            };
        })(f); 

        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
    }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

function alignment() {
    var lengthoftxt=$('#textid').val();

    for(var i=1;i<=lengthoftxt;i++)
    {
        $('#s'+i).each(function() {
            // $(this).css({"marginLeft": "opx"}); 
            $(this).css({"align": "horizontly"}); 
            //how to align horizontly one by one within that div???
        });
    }    
}

$(document).ready(function() {
    $('#textid').val('0');
});

函数对齐（）{
var lengthoftxt=$（'#textid'）.val（）；
对于（var i=1；我希望这是您想要的工作

p#列表
在
#snaptarget
之外，因此新创建的项目被放置在外部。将p标签放入
#snaptarget

<div id="snaptarget" class="ui-widget-header">
     <p id="list"></p>
</div>

您可以在创建跨度时添加一个类，例如
项

 var span = document.createElement('span');
 span.className = "item";

在对齐功能中，向所有具有类
项的跨距添加一个类，例如
向左浮动

 $('.item').addClass('float-left');

和CSS

.float-left{ float: left}

我尝试了$（this.css（'float'，'left'）；和$（this.css（{float:left}），而不是在你的小提琴中添加
float:left
@anpsmn；但没有用！。当您在上传两张图像后单击“对齐”时，它会水平对齐。请检查小图像以了解差异。它可以工作，但它会在div上移动，但我只想水平放置在div内。您是指带绿色边框的div吗？如果是，则列表本身在对齐之前不会附加到该div内。its工作正常，但当拖放并再次单击“对齐”按钮时，拖动的图像没有向左对齐！为什么？你能用小提琴向我显示拖放问题吗？我尝试用小提琴显示，但它没有在小提琴中运行，但拖动是在我的系统中运行的。我的问题是在将图像拖动到某个位置并单击“对齐”按钮后，实际上每当我单击“对齐”，所有图像应按顺序对齐。如何对齐？