顯示鏈接包裝到新行？

我有一個鏈接閱讀更多關於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

顯示鏈接包裝到新行？

回答

相關問題