1

我在 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 的版本。

阅读更多

我不太清楚应该应用什么风格。我尝试了几种可能的样式，但它们似乎都不能正常工作。如果我将样式 display:block 应用于链接，那么它会进入第二行，但是整个区域都变得可点击，因为您知道它的块占用了整行空间。

4

3 回答 3

2

display:table将收缩包装到内容，同时强制自己进入一个新的空行：

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

​ 一些样式的例子：http: //jsfiddle.net/SNUpD/6/

较旧的 Internet Explorer 可能需要一些替代解决方案，使用可能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-19T18:21:38.040 回答
1

设置display: block使用a：

a {
    display: block;
} ​

看这个例子

于 2012-05-19T18:20:42.090 回答
0 
p a.more-link{
    display: block;
}
于 2012-05-19T18:24:08.107 回答