Question

我正在尝试创建一个包含两种元素的容器项：item和text。逻辑应该是这样的：

背景始终以内联显示样式着色（使用背景而不是阻止的换行符）;
在一个列表中单独列出项目。

以下是使用的层次结构：

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

当我删除这些行时，文本背景会回到我想要的状态，然而，按钮会丢失它们的顺序（因为内联）并且像普通文本一样显示在同一行上。

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

Answer 1

有点hacky，但您可以使用:after制作换行元素：

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

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

Answer 2

您可以更改标记以指示每个项目应位于其自己的行（<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>

然后你根本不需要浮动/清除css。

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

显示：内联和浮动：左

2 个答案: