html怎么让子自动另起一行,如何让浮动span自动占有一行

今天搞博客,有个问题解决不了,先上图:

这是正常状态:

这是压缩状态:

当用chrome缩小网页的时候,可以看到span被挤出了a的边框,怎么才能让span被压缩的时候自占一行.

测试代码:

Test

a {

position: relative;

display: block;

padding: 10px 15px;

margin-bottom: -1px;

background-color: #fff;

border: 1px solid #ddd;

text-decoration: none;

}

span {

float: right;

display: inline-block;

min-width: 10px;

padding: 3px 7px;

font-size: 12px;

font-weight: bold;

color: #fff;

line-height: 1;

vertical-align: baseline;

text-align: center;

background-color: #999;

border-radius: 10px;

}

Lorem ipsum dolor sit amet, consectetur adipisicing2014年04月25日