Question

我尝试将项目描述添加到水平滚动图库。什么原因导致.box类之上的填充？一直试图弄清楚这一点，并会欣赏任何指针。谢谢！

CSS

.box {
background-color: #999;
height: 300px;
width: 500px;
padding: 80px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
white-space:normal;
}
ul.horizontal-slide {
margin: 0;
padding: 0;
width: 100%;
white-space: nowrap;
overflow-x: auto;
}

ul.horizontal-slide li[class*="span"] {
    display: inline-block;
    float: none;
}

ul.horizontal-slide li[class*="span"]:first-child {
    margin-left: 0;
}

HTML

<ul class="horizontal-slide">

<li class="span2 box">
        <h1>Title</h1>
        <br>    
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
        </p>
</li>
<li class="span2">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/500X300" alt="" />
    </a>
</li>
<li class="span2">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/500X300" alt="" />
    </a>
</li>
<li class="span2">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/500X300" alt="" />
    </a>
</li>
</ul>

请参阅此处的示例： http://jsfiddle.net/3Dvkf/

Answer 1

将vertical-align:top添加到li元素，它们与默认元素（baseline）对齐。

UPDATED EXAMPLE HERE

ul.horizontal-slide li {
    vertical-align: top;
}

Answer 2

内联块将内容与底部对齐。 add vertical-align：top;到你的班级：

ul.horizontal-slide li[class*="span"] {
    display: inline-block;
    vertical-align: top;
    float: none;
}

水平滚动图库上的对齐问题

2 个答案: