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以使标题文本具有固定宽度，例如300px，以及所有＆＃39;视图＆＃39;链接显示在文本的右侧，而列显示在另一个的下方？

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>

Sample

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

固定宽度标题文本与链接

3 个答案: