html - 将多个跨度与页脚底部对齐

Question

看似简单的任务，但我就是想不通。我的页脚内有多个 span，我希望它们与底部对齐。

我试过添加 vertical-align:bottom 和 bottom:0 但没有成功。

<footer>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</footer>

重要它们是spans!

下面是 css 和 here's a fiddle .

footer {
    width:100%;
    height:30px;
    background-color:#555;
}
span {
    border-left:1px solid #DDD;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height:50%;
    display:block;
    float:left;
    width:25%;
}

编辑
我不够清楚。我希望页脚内的跨度与底部对齐。这就是我现在拥有的:

这就是我想要的:

Answer 1

根据您的评论“无边距，无填充”，我看到的唯一方法是将您的跨度包装到一个 div 中，并根据需要定位该 div。

HTML

<footer>
    <div>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
    </div>
</footer>

CSS

footer {
    width:100%;
    height:30px;
    background-color:#555;
    position: relative;
}
div{
    position: absolute;
    bottom: 0;
    height:50%;
    width: 100%;
}
span {
    border-left:1px solid #DDD;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height:100%;
    display:block;
    float:left;
    width:25%;
    background-color:#777;
 }

Fiddle