使用元素创建一行是下一行的最后一行,但不是全宽?

时间:2013-11-29 18:07:26

标签: css css3

我连续有三个链接,我希望第三个链接在下一行,通常我会使用

 .new-line { display:block; }

但是,如果我这样做,链接是下一行宽度的100%,如果你在线上移动鼠标,你会看到所有的都是可点击的(即使没有悬停在实际的单词链接上)。

在这种情况下,我还有以下内容:在此之前需要与链接的实际内容一起显示。

所以它是:

.new-line:before { content: 'something'; }

在此示例中,我无法添加额外的标记(HTML或jQuery)。

CSS是否有办法让第三个元素出现在下一行?

这是一个带有确切标记的JSFIDDLE,我正在尝试实现此目的。

http://jsfiddle.net/2Fkev/3/

感谢您提供任何提示

2 个答案:

答案 0 :(得分:0)

试试这个CSS:

.new-line:before {
  content: ' ';
  display: block;
}

让我知道它是否有用。

答案 1 :(得分:0)

这肯定会解决您的问题,但请检查兼容性问题

.new-line {display:table-cell; }

这是jsFiddle

如果你可以允许自己,那么完美的解决方案就是:

a{
    float:left;
    margin-left:5px;
}

.new-line { clear:both; }