显示链接包装到新行？

我有一个链接阅读更多关于WordPress的博客索引页面。它作为给定的参考代码插入< p>标签内。显示链接包装到新行？

<p>Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
    <a class="more-link local-link" href="http://example.com/"> 
    <span>Read <span class="red">More</span></span> 
    </a> 
</p>

现在我想这样，因为它出现在这样的第二行样式的链接...

段落文本这里... assages，以及最近与桌面排版软件，如Aldus PageMaker包括Lorem Ipsum版本。

我的线索少的应适用什么样的风格。我尝试了几种可能的风格，但他们都没有正常工作。如果我应用样式显示：块链接，然后它进入第二行，但是整个区域变得可点击，因为您知道它是一个占据整行空间的块。使用上a

来源

2012-05-19 Krunal

display:table同时迫使自己一个新的空行会拆封内容：

a { 
    display: table; /* beware older IEs! */ 
    margin-top: 1em; /* area above the link won't be clickable */ 
}

一些造型示例： http://jsfiddle.net/SNUpD/6/

较早的互联网探索者可以使用可能zoom:1 + display:inline或类似的东西需要一些替代解决方案。

我不能让一个更好的解决办法IE，不幸的是它包装Read more两行： http://jsfiddle.net/SNUpD/9/

*display: inline; 
*zoom: 1; 
*margin: 2em 100em 2em 2em; /* force line breaks with insane right margins */

来源

2012-05-19 18:21:38 biziclop

这也是一个很好的解决方案，但什么生根粉旧的IE浏览器？你的意思是IE6或7/8？ – Krunal

集display: block：

a { 
    display: block; 
}

看到这个example

来源

2012-05-19 18:20:42 jacktheripper

谢谢，这有助于。我还添加了80px的固定宽度，以便a不占用整条线。 – Krunal

没问题，乐于帮忙！ – jacktheripper

看一看这样的：http://jsfiddle.net/SNUpD/3/ – Krunal

p a.more-link{ 
    display: block; 
}

来源

2012-05-19 18:24:08

显示链接包装到新行？

回答

相关问题