html - 清除行内 block 元素到下一行

Question

我希望将内联 block 元素(在本例中为 <a> 中的 <p>)清除到下一行，而无需设置 display:block并定义宽度。

这是一个例子:http://jsfiddle.net/alecrust/zstKf/

这是期望的结果(使用 display:block 并定义宽度):http://jsfiddle.net/alecrust/TmwhU/

Answer 1

如果您想避免设置明确的宽度以便根据文本的实际长度设置背景样式，您可以执行以下操作:

包装你的链接:

 <p>To stay up to date <span><a href="#">Follow Us</a></span></p>

请注意，我添加了一个 <span>标记链接。

使用 CSS 设置包装器的样式:

 span {
   display: inline-block;
   width: 100%;
 }

将宽度设置为 100% 会强制包装器占据整行。保持 <a>设置为 inline-block 的链接标记允许它应用填充和背景，同时不扩展以适应容器的 100% 宽度。

fork JSFiddle:http://jsfiddle.net/Cm9kZ/