javascript - 排序后项目失去对齐

Question

为什么项目在排序后失去对齐？

我尝试再次编写 css 代码 - 但没有成功。

有什么帮助吗？

function sort_tags(){
	let a = $('#selSort').val();
	if(a == 'asc'){
		$('.tag').sort(function(a, b) {
			if (a.textContent < b.textContent) {return -1;}
			else{return 1;}
		}).appendTo('#parent');
	}
	else if(a == 'desc'){
		$('.tag').sort(function(a, b) {
			if (a.textContent < b.textContent) {return 1;}
			else{return -1;}
		}).appendTo('#parent');
	}
	$('.tag').css('display', 'inline-block');
	$('#parent').css('text-align-last', 'justify');
}

.parent{
text-align:justify;
text-align-last:justify;
}

.tag{
display:inline-block;
padding:2px 9px;
background:gold;
margin:9px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='parent' id='parent'>
<div class='tag'>aaa</div>
<div class='tag'>bbb</div>
<div class='tag'>ccc</div>
<div class='tag'>ddd</div>
</div>

<select class='selTop' id='selSort' onchange='sort_tags()'>
<option value='asc'>SORT ABC</option>
<option value='desc'>SORT CBA</option>
</select>

Answer 1

你可以使用flex

.parent{
  display:flex;
  justify-content: space-between;
}

function sort_tags(){
	let a = $('#selSort').val();
	if(a == 'asc'){
		$('.tag').sort(function(a, b) {
			if (a.textContent < b.textContent) {return -1;}
			else{return 1;}
		}).appendTo('#parent');
	}
	else if(a == 'desc'){
		$('.tag').sort(function(a, b) {
			if (a.textContent < b.textContent) {return 1;}
			else{return -1;}
		}).appendTo('#parent');
	}
}

.parent{
  display:flex;
  justify-content: space-between;
}

.tag{
display:inline-block;
padding:2px 9px;
background:gold;
margin:9px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='parent' id='parent'>
<div class='tag'>aaa</div>
<div class='tag'>bbb</div>
<div class='tag'>ccc</div>
<div class='tag'>ddd</div>
</div>

<select class='selTop' id='selSort' onchange='sort_tags()'>
<option value='asc'>SORT ABC</option>
<option value='desc'>SORT CBA</option>
</select>