6

我希望将 inline-block 元素（在本例中为<a>within a <p>）清除到下一行，而无需设置display:block和定义宽度。

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

这是所需的结果（使用display:block和定义宽度）：http: //jsfiddle.net/alecrust/TmwhU/

4

7 回答 7

3

如果要避免设置显式宽度，以便根据文本的实际长度设置背景样式，可以执行以下操作：

包装你的链接：

 <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% 宽度。

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

于 2014-06-27T13:47:26.027 回答
1

这有点麻烦，但它会起作用：

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

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

于 2012-06-13T13:52:58.237 回答
1

我能得到的最接近我想要的是在（小提琴:before）之前插入一个新行。不幸的是，这并没有将其清除到下一行。<a>

于 2012-06-13T14:42:59.713 回答
1

这仅在您想在 p 中的最后一个元素之后换行时才有效。

我已经做了很多实验，这对我有用，在 Safari 6 中：

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

我没有在其他浏览器中测试过这个，但是它非常简单，它应该可以在所有支持display: inline-block.

于 2013-01-17T06:42:22.093 回答
1

inline-block 元素后的空<div/>，清除 inline-block。

于 2015-02-11T08:54:00.633 回答
0

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

我希望这会有所帮助，但这不是因为您的链接之前没有元素。

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

于 2012-06-13T14:27:59.747 回答
0

使用伪类 :: after 你可以用clear:both;添加内容 财产给它。

未经测试，但理论上应该可以工作。

于 2015-01-26T16:45:33.033 回答