Question

检查以下代码

HTML：

＆＃13;

$(document).ready(function(){
	var $this=$('<a href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>');
  for (var i=0;i<=9;i++){
  	$("#thumbs").append($this.clone());
  }
});

＆＃13;

#thumbs {   
    width: 100%;
    margin-top:90px;
     text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}
#thumbs a {
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thumbs">
    <a href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
    <a href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
    <a href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
    <a href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
    <a href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
    <a href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
    <a href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
    <a href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
    <a href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
</div>

＆＃13;

当直接在html页面中添加时，锚标签会被证明是合理的，但是当从javascript添加时，它不合理。

有什么建议吗？别忘了查看fiddle

Answer 1

如果您不支持IE10以下，则可以使用flexbox。它肯定会奏效。查看https://css-tricks.com/snippets/css/a-guide-to-flexbox/了解详情。

#thumbs{ display:flex; justify-content: space-between; }

水平对齐拇指

1 个答案: