顯示：內聯和浮動：左

我試圖創建一個容器項目將包括兩個類型的元素：項目和文本。邏輯應該是這樣的：顯示：內聯和浮動：左

背景總是用內聯顯示樣式着色（帶有背景而不是塊的換行符）;一個名單上

Seperete項目。

這裏是用來層次：

<div id="container"> 
    <div class="text bg">This is only a sample text to show the weird problem about inline text and background.</div> 
    <div class="item bg">Item One</div> 
    <div class="item bg">Item Two</div> 
    <div class="item bg">Item Three</div> 
    <div class="item bg">Item Four</div> 
    <div class="item bg">Item Five</div> 
</div>

你可以從小提琴看;由於容器的寬度值，文本元素的背景看起來像塊而不是內聯。我能找到的唯一辦法是刪除這些行：

float: left; 
clear: both;

當我刪除這些行，文本背景可追溯到我要怎麼然而它是;按鈕失去它們的順序（因爲內嵌的），並顯示在同一條線上，就像普通的文本..

我很樂意聽到這個問題，這主要是基於這些排版問題的一些解決方案。

來源

2013-02-05 Mia

您可以更改您的標記，以表明每一個項目應該是它自己的線（<div>或多個），然後樣式內嵌元素中的內容。

<div id="container"> 
    <div class="text"><span class="bg">This is only a sample text to show the weird problem about inline text and background.</span></div> 
    <div class="item"><span class="bg">Item One</span></div> 
    <div class="item"><span class="bg">Item Two</span></div> 
    <div class="item"><span class="bg">Item Three</span></div> 
    <div class="item"><span class="bg">Item Four</span></div> 
    <div class="item"><span class="bg">Item Five</span></div> 
</div>

然後，你根本不需要float/clear css。

例如：http://jsfiddle.net/BZw4A/3/

來源

2013-02-05 02:00:50

這是一個小哈克，但您可以使用:after做一個換行符元素：

.bg:after { 
    content: ''; 
    display: block; 
}

演示：http://jsfiddle.net/BZw4A/4/

來源

2013-02-05 01:59:28 Blender

顯示：內聯和浮動：左

回答

相關問題