显示:内联和浮动:左

时间:2013-02-05 01:51:46

标签: html css html5 css3

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

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

  • 在一个列表中单独列出项目。

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

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

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

2 个答案:

答案 0 :(得分:1)

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

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

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

答案 1 :(得分: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/