固定寬度的標題文字

我有幾個職位是這樣的：固定寬度的標題文字

<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，並且所有的'view'鏈接都顯示在文本的右側，並且作爲另一個下面的列？

來源

2013-03-27 area5one

您可以更改HTML代碼，或者它必須只能是CSS？ – poepje 2013-03-27 18:53:43

您是否希望視圖鏈接保留在標題文本的右側？ – j08691 2013-03-27 19:01:36

我可以更改html，但越簡單越好...我希望得到的視圖鏈接是在標題的文本 – area5one 2013-03-27 19:14:52

如果您不能更改HTML

p { 
    width: 300px; 
} 

p a { 
    float: right; 
}

http://jsfiddle.net/DvYq8/

來源

2013-03-27 18:58:49

下方不在 – Huangism 2013-03-27 18:59:19

@黃色 - 在這方面的OP不明確。他說他希望鏈接在下面，不一定在標題下面。所以表格佈局可能是他所追求的。 – j08691 2013-03-27 19:01:04

不確定。我認爲他意味着他希望所有的鏈接在「不同的專欄」中處於彼此之下？ – 2013-03-27 19:01:42

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; 
}

來源

2013-03-27 18:56:11 Michael

這裏的CCS代碼如果不允許html修改。您需要更改a標記顯示屬性。

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

Sample

但是，實際上它是更好地重寫你的HTML結構，使之更加可靠和易於使用CSS來管理。

來源

2013-03-27 18:58:33

固定寬度的標題文字

回答

相關問題