Question

我希望将内联块元素（在本例中为<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>标记保持为内联块允许其应用填充和背景，同时不将其展开以适应容器的宽度100％。

分叉JSFiddle：http://jsfiddle.net/Cm9kZ/

Answer 2

这有点像kludge，但它会起作用：

a {
    display: inline-block;
    padding: 5px 18px;
    background-color: #8C4AD5;
    text-decoration: none;
    position:relative;
    top:25px;
    left:-30%
}

你必须捏造左侧位置，但这基本上会让你重新设置一个已知值，就像display:block示例中的宽度问题一样。不是更好，只是一种不同的方法。

Answer 3

我最接近我想要的是使用:before在<a>（Fiddle）之前插入新行。不幸的是，这并没有将它清除到下一行。

Answer 4

这仅适用于您希望在p中的最后一个元素后换行符。

我已经尝试了很多，这对我来说很有用，在Safari 6中：

p.linebreak-after-last-element:after {
   content: "";
   display: inline-block;
   width: 100%;
}

我没有在其他浏览器中对此进行测试，但它非常简单，应该适用于支持display: inline-block的所有浏览器。

Answer 5

inline-block元素后面的空<div/>清除内联块。

Answer 6

根据您的要求，我认为不可能。

我希望this would help，但不是因为你的链接之前没有元素。

您应该只更改HTML，例如：http://jsfiddle.net/thirtydot/zstKf/10/

Answer 7

使用伪类::您可以添加clear:both的内容后;它的财产。

未经测试，但理论上应该有效。

将内联块元素清除到下一行

7 个答案: