使用 jQuery 操作后保持对齐的内联块元素的对齐答案

【问题标题】：Maintaining justification of justified inline-block elements after manipulation using jQuery使用 jQuery 操作后保持对齐的内联块元素的对齐
【发布时间】：2023-04-07 10:15:01
【问题描述】：

我正在使用 text-align:justify 来均匀地隔开内联块元素。我正在使用 jQuery 交换某些元素，以便它们更适合（例如更有效地填充行）。然而，浏览器不再正确地证明交换的元素是正确的。有没有办法让浏览器重新调整元素来克服这个问题？

编辑这是一个显示问题的 jsfiddle：http://jsfiddle.net/sprintstar/HKDd9/3/

【问题讨论】：

请jsfiddle你的代码或发布一些你使用过的html和css。
已尝试在jsfiddle.net/2kWSk 重新创建您的问题，但 div 在交换后似乎保持其文本对齐。也许在您的情况下，在交换位置后，它们不再匹配之前所做的 CSS 属性？不过，指向小提琴的链接将有助于识别问题。
这个jsfiddle.net/sprintstar/HKDd9/1 应该展示我正在尝试做的事情（尽管我实际上无法让元素交换）。
啊，我们开始吧：jsfiddle.net/sprintstar/HKDd9/2
元素仍然没有交换，但它表明失去了理由。

标签： jquery css dom text-align

【解决方案1】：

问题在于行内块元素之间缺少空格。你错过的是文本节点：

$(function() {
    var eq3 = $('.container a:eq(3)');
    var eq4 = $('.container a:eq(4)');
    eq4.before(eq3).before(" ");
});

http://jsfiddle.net/archatas/HKDd9/4/

【讨论】：

你的意思是：eq3.before(eq4).before(" ");
我没有检查这个实际代码，但确保我的操作元素之间有一个空格是保持一切正常工作的关键..

【解决方案2】：

虽然我不确定您的代码未按预期工作的原因，但我有一个可能的解决方案。也许有人可以对这个问题有所了解。

首先eq4.before(eq3); 表示您将其放回您选择的位置。我相信你的意思是eq4.insertBefore(eq3);

我尝试添加一个新元素，效果很好

 $('<a href="#" class="sq-1"><img src="http://placehold.it/64x32" /></a>').insertBefore(eq3);

编辑：但是克隆相同的元素不会产生相同的结果。

eq4.clone().insertBefore(eq3);
eq4.remove();

【讨论】：

你说得对，insertBefore 是我需要的，我已经更新了我的问题中的 jsfiddle 链接，所以现在元素正在交换，但不再合理。
您的eq4.clone().insertBefore(eq3).remove(); 行似乎不起作用？