html - 带有链接的固定宽度标题文本

Question

我有几个这样的帖子：

<p>Title 1 <a href="/view/1">view</a></p>
<p>Title 2 <a href="/view/2">view</a></p>
<p>Longer Title 3 <a href="/view/3">view</a></p>

是否可以对它们进行 CSS 以使标题文本具有固定宽度，例如 300 像素，并且所有“视图”链接都出现在文本的右侧，并且作为一列在另一列下方？

Answer 1

如果您无法更改 HTML

p {
    width: 300px;
}

p a {
    float: right;
}

http://jsfiddle.net/DvYq8/

Answer 2

http://jsfiddle.net/t6a9A/

不得不稍微修改HTML...

HTML：

<p><span>Title 1</span> <a href="/view/1">view</a></p>
<p><span>Title 2</span> <a href="/view/2">view</a></p>
<p><span>Longer Title 3</span> <a href="/view/3">view</a></p>

CSS：

p {
    width: 300px;
    height: 50px;
    position: relative;
}
p > span {
    display: block;
    width: 100%;
    background: #ccc;
}

p > a {
    position: absolute;
    top: 20px;
    left: 0;
}

Answer 3

如果不允许修改 html，这里是 CCS 代码。您需要更改a标签显示属性。

<style type="text/css">
a { display:block; }
p { border:1px solid #FF0000; width:300px; }
</style>

样本

但是，实际上最好重写您的 HTML 结构，使其更可靠且易于通过 CSS 管理。