1

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

  • 背景总是用内联显示样式着色（背景换行而不是块）；

  • 在一个列表中分隔项目。

请看看我的小提琴：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>

从小提琴中可以看出，由于容器的宽度值，文本元素的背景看起来像块而不是内联。我能找到的唯一方法是删除这些行：

float: left;
clear: both;

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

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

4

2 回答 2

1

这有点 hacky，但您可以:after用来制作换行符：

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

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

于 2013-02-05T01:59:28.547 回答
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>

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

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

于 2013-02-05T02:00:50.687 回答