text-align:justify对动态数据无效?

<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方式显示,会紧挨着。只有在页面加载的时候渲染出来的才会正常显示。。


问下各位,这个有没有解决办法。


PIPIONE
浏览 370回答 1
1回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript