编辑:已解决:见李斯特先生的回答。
当浏览器窗口拉伸宽度大于约1000px时,最后一行似乎失去了水平间距。 请特别注意,在下面屏幕截图的最后一行中,元素之间的水平间距小于它上面的行。
示例:http://opinnacle.ca/galleria.html
我该如何解决这个问题?
此示例中使用的源如下所示:
HTML:
<div style="margin:0 auto; width: 100%; padding-top: 65px; background: #eee; min-height:100%;">
<div style="min-width:300px; height: 100%; padding-top:5px;"></div>
<ul style="text-align:justify; margin:0 auto; width:100%;">
<li class="roundcontainer"><img src="images/image1.png" alt="#" /> <div class="icononame">Aaton Boards</div></li>
<li class="roundcontainer"><img src="images/image2.png" alt="#" /><div class ="icononame">Ascento</div></li>
<li class="roundcontainer"><img src="images/image3" alt="#" /><div class="icononame">Blackmagic</div></li>
<li class="roundcontainer"><img src="images/image4" alt="#" /><div class="icononame">Festivo</div></li>
<li class="roundcontainer"><img src="images/image5" alt="#" /><div class="icononame">Midicon</div></li>
</ul>
<span class="stretch"></span>
</div>
CSS:
.stretch {
width: 100%;
display: inline-block;
height:0px;
}
.roundcontainer{
display: inline-block;
float:none;
margin-bottom:35px;
margin-top:35px;
height:190px;
width:190px;
border-style: solid;
border-width: 1px;
border-color: #ccc;
-moz-border-radius: 7px;
border-radius: 7px;}
.roundcontainer img {
height:175px;
width:175px;
list-style: none;
margin:10px 10px auto;
display:inline-block;
}
.icononame {text-align: center;
font-family: 'minion-pro', serif;
font-style: normal;
font-weight: 400;
font-size: 0.75em;
color: #323c46;
margin-top: 9px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
答案 0 :(得分:3)
<ul>
内嵌样式text-align:justify
,列表项全部为inline-block
。
实际上,这意味着列表项的行为就像对齐段落中的单词:它们在ul的宽度上均匀分布。除最后一行之外的所有内容,即。
解决方案:从text-align:justify
移除<ul>
,或将其更改为text-align:center
。然后所有列表项将与最后一行一样靠近。将一些左右边距添加到列表项中以使它们分开更远。
答案 1 :(得分:0)
此问题有一种解决方法,它使用了几个相同宽度的额外“占位符”内联块。请参阅此文章:http://www.barrelny.com/blog/text-align-justify-and-rwd/