html - 显示 : inline and float: Left

Question

我正在尝试创建一个包含两种元素的容器元素:元素和文本。逻辑应该是这样的:

• 背景始终以内联显示样式着色(使用背景换行符而不是 block )；

• 在一个列表中分隔元素。

请看我的 fiddle :http://jsfiddle.net/BZw4A/

这是使用的层次结构:

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

正如您从 fiddle 中看到的那样，由于容器的宽度值，文本元素的背景看起来像 block 而不是内联。我能找到的唯一方法是删除这些行:

float: left;
clear: both;

当我删除这些行时，文本背景恢复到我想要的样子，但是，按钮失去了它们的顺序(因为内联)并像普通文本一样显示在同一行上。

我很想听听主要基于这些排版问题的一些解决方案。

Answer 1

您可以更改您的标记以指示每个元素都应独占一行(<div> s)，然后在内联元素中设置内容样式。

<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/