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>

タイトル テキストが 300px などの固定幅になり、すべての「表示」リンクがテキストの右側に表示され、上下の列として表示されるように、それらを CSS することは可能ですか?

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 で管理しやすいようにした方がよいでしょう。