html - 使父容器适合内部内容

Question

我有这个布局jsfiddle .

<a>
<span class="blue">111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111</span>
<span class="red">111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111</span>
</a>

span {
    display: inline-block;
}
.red{
    background-color:red;
}
.blue{
    background-color:blue;
}
a {
    display: inline-block;
    background-color:green;
}

我想让父 anchor 适合内部跨度的宽度，以便在调整大小时响应行为。怎么办？

Answer 1

在span上使用display: block

Fiddle

span {
    display: block;
}