<style>
ul { text-align: justify; background: #eee;}
ul li { width: 350px; height: 350px; border: 1px solid red; list-style: none; display: inline-block; margin-top: 20px;}
</style>
<body>
<button>add</button>
<ul>
<li>li</li>
<li>li</li>
<li>li</li>
</ul>
</body>
<script>
$("button").click(function() {
$("ul").append("<li>li</li>");
})
</script>
本来以为动态数据不会对css样式造成影响，但是却发现了一个问题。
当text-align值是center的时候，元素居中，无论后来追加多少个，每次追加都会重新计算，元素都是居中显示。
但是当text-align值是justify的时候，当超过一行的时候，第一行最后几个（数量不定，好像是和元素的宽度有关）会紧挨着，之后再追加，下面的行里都不会按照text-algin:justify方式显示，会紧挨着。只有在页面加载的时候渲染出来的才会正常显示。。
问下各位，这个有没有解决办法。
相关分类