內嵌事後元素塊元素

<p> some text here </p> 
<a href="#">more</a>

，我試圖

p+a{ 
    color: #f00; 
    display: inline-block; 
    /* also tried float: left; */ 
}

要打開的輸出，因爲這

一些文本這裏的CSS 更多

我想要更多在第p行。

解釋你想要什麼？ – Shahbaz

您可以將錨點放在段落內並向其中添加一個類。然後你就可以對課程進行設計。這對你有用嗎？ – kleinfreund

@Shahbaz我想要「更多」的p行。 –

p是塊級元素。所以你不能內聯到a。因此，你需要你的風格作爲p或display: inline;和display: inline-block;然後給display: inline;或display: inline-block;到a

這裏是fiddle。

2013-06-19 07:01:30

您還需要給段落display: inline-block;，因爲它是一個塊級元素。因此它會自動獲取可用空間並將錨點推到新的一行。您還需要將"關閉添加到您的href-屬性中。

（如果你能操縱段的標記 - 只需添加錨點它裏面。）

HMTL：

<p>some text here</p> 
<a href="#">more</a>

CSS：

p { 
    display: inline-block; 
} 

p + a { 
    color: #f00; 
    display: inline-block; 
}

注意：請使用類來代替元素的樣式。添加一個類到你的錨點，並選擇p + .read-more或類似的東西。

2013-06-19 07:01:52 kleinfreund

當我嘗試使用內聯塊時，我的模板上出現了一些問題，但它沒有顯示任何內容，但是當我嘗試內聯時，它對網站沒有任何影響。 –

我在一個空白的html頁面上試過它，它工作得很好。我相信，將內聯的自然塊級元素顯示爲內聯並不是一個真正適合的方法。 – kleinfreund

我知道，但沒有奏效。 –

使用此代碼

CSS：

p > a { 
    color: #f00; 
    display: inline-block; 
    font-size: 18px; 
}

HTML：

<p>some text here <a href="#">more</a></p>

2013-06-19 07:03:20 Shahbaz

注意：作者無法更改標記。目前他無法將錨定在段落內。 – kleinfreund

只需添加以下CSS到你的樣式表。

p{ dislpay:inline-block;}

P是一個塊級元素使它inline-block所以下一內嵌元素拿出旁邊p標籤。

2013-06-19 07:14:24

你爲什麼要複製答案，其他人已經提供了幾分鐘的時間？ – kleinfreund

回答